首頁 > 開發者 > JavaScript
完美實現js拖拽效果 return false用法詳解，jsfalse
本文為大家分享了完美實現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>
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
