完美实现js拖拽效果 return false用法详解

2019-11-19 15:57:22

字体：大中小

来源：转载

供稿：网友

本文为大家分享了完美实现js拖拽效果的具体代码，告诉大家return false的用法，供大家参考，具体内容如下

1.return false可以用来阻止默认事件即系统默认事件。例如通过阻止默认事件，来对textarea中的值进行范围限制（通过限制keycode的数值），也可以自定义在页面中的右键菜单（oncontextmenu）。

2.在鼠标移动（mousemove）等事件中，是需要给事件传一个参数，保证程序的正常运行。而为了兼容取事件方法为：var oEvent=ev||event;

3.在节点中创建一个新的节点的方法为：

var oBox=document.createElement('div');    oBox.className='box';    oBox.style.left = oDiv.offsetLeft+'px';    oBox.style.top = oDiv.offsetTop+'px';    oBox.style.width = oDiv.offsetWidth+'px';    oBox.style.height = oDiv.offsetHeight+'px';    document.body.appendChild(oBox);    //注意，在创建完之后一定要将创建好的节点加入body中！！！

下列为完整代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>完美拖拽2</title> <style>  *{   margin: 0;   padding: 0;  }  #div1{   width: 150px;   height: 150px;   background: #71C525;   position: absolute;  }  .box{   border: 2px dashed black;   position: absolute;  } </style> <script>  window.onload=function()  {   var oDiv = document.getElementById('div1');   var disX=null;   var disY=null;   oDiv.onmousedown=function(ev)   {    var oEvent=event||ev;    disX=oEvent.clientX-oDiv.offsetLeft;    disY=oEvent.clientY-oDiv.offsetTop;    var oBox=document.createElement('div');    oBox.className='box';    oBox.style.left = oDiv.offsetLeft+'px';    oBox.style.top = oDiv.offsetTop+'px';    oBox.style.width = oDiv.offsetWidth+'px';    oBox.style.height = oDiv.offsetHeight+'px';    document.body.appendChild(oBox);    document.onmousemove=function(ev)    {     var oEvent=event||ev;     var l=oEvent.clientX-disX;     var t=oEvent.clientY-disY;     if (l<0) {      l=0;     } else if (l>document.documentElement.clientWidth-oDiv.offsetWidth) {      l=document.documentElement.clientWidth-oDiv.offsetWidth;     }     if (t<0) {      t=0;     } else if (t>document.documentElement.clientHeight-oDiv.offsetHeight) {      t=document.documentElement.clientHeight-oDiv.offsetHeight;     }     oBox.style.left = l+'px';     oBox.style.top=t+'px';    };    document.onmouseup=function()    {     document.onmousedown=null;     document.onmousemove=null;     oDiv.style.left = oBox.offsetLeft+'px';     oDiv.style.top = oBox.offsetTop+'px';     document.body.removeChild(oBox);    };    return false;//阻止默认事件（系统默认事件）！   };  }; </script></head><body> <div id="div1"></div></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：jQuery dateRangePicker插件使用方法详解

下一篇：webpack 2的react开发配置实例代码