掌握JavaScript中的事件

更新时间：2008-03-19参与评论

（三）兼容于两种主流浏览器的拖动DOM元素的例子

好了，刚才讲了这么多DOM编程和IE中的事件，那么如何编写兼容IE和Mozilla Firefox两种主流浏览器的拖拽程序呢？代码如下：

function beginDrag(elementToDrag,event)
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left); 
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener)
{
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
  }
  else if(document.attachEvent)
  {
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
  }
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e)
{
if (!e) e=window.event; //如果是IE的事件对象，那么就用window.event
//全局属性，否则就用DOM二级标准的Event对象。
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}
function upHandler(
  e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);}
else
{ 
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}