完美實(shí)現(xiàn)js拖拽效果 return false用法詳解
本文為大家分享了完美實(shí)現(xiàn)js拖拽效果的具體代碼,告訴大家return false的用法,供大家參考,具體內(nèi)容如下
1.return false可以用來阻止默認(rèn)事件即系統(tǒng)默認(rèn)事件。例如通過阻止默認(rèn)事件,來對(duì)textarea中的值進(jìn)行范圍限制(通過限制keycode的數(shù)值),也可以自定義在頁面中的右鍵菜單(oncontextmenu)。
2.在鼠標(biāo)移動(dòng)(mousemove)等事件中,是需要給事件傳一個(gè)參數(shù),保證程序的正常運(yùn)行。而為了兼容取事件方法為:var oEvent=ev||event;
3.在節(jié)點(diǎn)中創(chuàng)建一個(gè)新的節(jié)點(diǎn)的方法為:
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); //注意,在創(chuàng)建完之后一定要將創(chuàng)建好的節(jié)點(diǎn)加入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;//阻止默認(rèn)事件(系統(tǒng)默認(rèn)事件)! }; }; </script> </head> <body> <div id="div1"></div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于Javascript實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單效果
這篇文章主要為大家詳細(xì)介紹了基于Javascript實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單效果的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03詳解微信小程序自定義組件的實(shí)現(xiàn)及數(shù)據(jù)交互
這篇文章主要介紹了微信小程序自定義組件的實(shí)現(xiàn)及數(shù)據(jù)交互,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07JS驗(yàn)證IP,子網(wǎng)掩碼,網(wǎng)關(guān)和MAC的方法
這篇文章主要介紹了JS驗(yàn)證IP,子網(wǎng)掩碼,網(wǎng)關(guān)和MAC的方法,涉及javascript正則表達(dá)式的相關(guān)使用技巧,需要的朋友可以參考下2015-07-07javascript iframe中打開文件,并檢測(cè)iframe存在否
從iframe中打開文件,并檢測(cè)iframe存在否如果說只是檢測(cè)頁面存在否,直接設(shè)置target用偽協(xié)議就可以解決了...2008-12-12JS二進(jìn)制流文件下載導(dǎo)出(接口返回二進(jìn)制流)亂碼處理方法
這篇文章主要介紹了JS二進(jìn)制流文件下載導(dǎo)出(接口返回二進(jìn)制流)亂碼處理方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12引入autocomplete組件時(shí)JS報(bào)未結(jié)束字符串常量錯(cuò)誤
在引入jQuery的autocomplete組件時(shí),遇到j(luò)s報(bào)未結(jié)束字符串常量錯(cuò)誤,原因及解決方法如下,大家可以參考下2014-03-03