本文為大家分享了完美實現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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
