DOM事件模型例子：可拖动的元素

关注

原创最新推荐文章于 2026-05-17 09:01:22 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

群晖Git Server权限配置全攻略：如何让普通用户（非admin）也能安全提交代码？本文详细解析了群晖Git Server权限配置方案，特别针对普通用户（非admin）安全提交代码的需求。通过SSH服务配置、精细化用户权限管理及仓库创建自动化脚本，实现在DS218+等群晖NAS设备上的高效代码协作，同时确保系统安全。阅读详情

通过对javascript权威指南第四版第十九章事件与事件处理的学习，基本了解了不同浏览器(IE5+, IE4, firefox, netscape)的事件模型的区别。本例子根据不同浏览器的不同事件模型实现方法，实现支持所有浏览器的脚本，并且可以看出不同事件模型的区别。

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
/**说明：自动判断浏览器是否支持，运行此程序。
*该函数由mousedown事件处理程序中调用它时，它允许用户拖动文档元素。
*beginDrag()的第一个参数必须是一个文档元素，该元素用CSS position性质绝对定位。在style性质中，CSS性质的left和top
*必须被明确地设置为像素值，第二个参数是与触发mousedown事件相关的事件对象。
**/
function beginDrag(elementToDrag, event) {

var x = parseInt(elementToDrag.style.left);
var y = parseInt(elementToDrag.style.top);

//计算一个点和鼠标点击(event.clientX,event.clientY)的位置之间的距离
    var deltaX = event.clientX - x;
    var deltaY = event.clientY - y;

if (document.addEventListener) //是否支持2级ＤＯＭ事件模型
{
  //document.write("该浏览器支持DOM L2事件模型");
  document.addEventListener("mousemove", moveHandler, true);
  document.addEventListener("mouseup", upHandler, true);
}
else if (document.attachEvent) //是否支持IE 5+事件模型
{
  //document.write("该浏览器是IE5+, 不支持DOM L2事件模型");
  document.attachEvent("onmousemove",moveHandler);
  document.attachEvent("onmouseup",upHandler);
}
else //ＩＥ　４事件模型
{ //在IE4我们不能使用attachEvent()方法，所以存储了以前赋予的处理程序后，
　//直接赋予新的事件处理程序．这样还可以恢复旧的处理程序．
　//注意：这同样依赖于事件气泡．
  //document.write("该浏览器是IE4");
  var oldmovehandler=document.onmousemove;
  var olduphandler=document.onmouseup;
  document.onmousemove=moveHandler;
  document.onmouseup=upHandler;
}

//我们已经处理了该事件，不要让别的元素看到它。
//Event接口还定义了两个方法，即stopPropagation()和preventDefault()

if (event.stopPropagation)
{
  event.stopPropagation();//stopPropagation()可以阻止事件从当前正在处理它的节点传播。
}else{
  event.cancelBubble=true;
}

    if (event.preventDefault)
    {
  event.preventDefault();//preventDefault()阻止浏览器执行与事件相关的默认动作
}else{
  event.returnValue=false;
}
      //在2级DOM API中，可以调用preventDefault()方法，与在0级事件模型中返回false一样。（如自定义右键弹出窗口）

    /**
*这是在元素被拖动时捕捉mousemove事件的处理程序。
     **/
    function moveHandler(e) {
  //把元素移到当前的鼠标位置，根据初始鼠标点击的偏移量进行调整。
  if (!e)
  {
   e=window.event;
  }
  elementToDrag.style.left = (e.clientX - deltaX) + "px";
  elementToDrag.style.top = (e.clientY - deltaY) + "px";

  // And don't let anyone else see this event.
  //不要让别的元素看到该事件。
  if (e.stopPropagation)
  {
   e.stopPropagation(); //ＤＯＭ　　L2
  }else{
   e.cancelBubble=true; //IE
  }
    }
    /**
*该处理程序将捕捉拖移结束时发生的mouseup事件。
     **/
    function upHandler(e) {

  if (!e)
  {
   e=window.event;
  }

  //注销捕捉事件处理程序。
  if (document.removeEventListener)
  {
  document.removeEventListener("mouseup", upHandler, true);
  document.removeEventListener("mousemove", moveHandler, true);
  }
  else if (document.detachEvent)
  {
   document.detachEvent("onmouseup",upHandler);
   document.detachEvent("onmousemove",moveHandler);
  }else
  {
   document.onmouseup=olduphandler;
   document.onmousemove=oldmovehandler;
  }

  // 不要让该事件进一步传播。
  if (e.stopPropagation)
  {
   e.stopPropagation();
  }else
  {
   e.cancelBubble=true;
  }
}
}

//-->
</SCRIPT>
</HEAD>

<BODY>

<DIV style="position:absolute;left:100px;top:100px;border:solid black;">

<DIV style="border-bottom:dotted black;padding:3px;font-family:sans-setif;font-weight:bold;" onmousedown="beginDrag(this.parentNode,event);">
DRAG ME!!!HELLO!
</DIV>

</DIV>

</BODY>
</HTML>