javascript
JavaScript区分click事件和mousedown（mouseup、mousemove）方法
在前端開發(fā)工作中，會遇到這樣問題：針對同一個dom元素，即希望為它綁定click事件，又想該元素可以允許拖拽的效果。而使用拖拽的效果，我們一般就會用到mousedown,mousemove和mouseup事件。但mousedown、mouseup就會和click事件發(fā)生沖突。我們希望在拖拽元素的時候不希望它執(zhí)行click方法，在執(zhí)行click方法是不希望執(zhí)行mousedown和mouseup方法。
比如如下代碼，就會出現(xiàn)上面的問題：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script src="js/jquery-1.11.2.js"></script><script>$(function(){$("#mydiv").on("click",function(){console.log("this is click event");});$("#mydiv").on("mousedown",function(){console.log("this is mousedown event");});$("#mydiv").on("mouseup",function(){console.log("this is mouseup event");});});</script> </head> <body><div id="mydiv" style="width:200px;height:200px;background: red;"> </div> </body> </html>
上述代碼在控制臺的輸出結(jié)果如下：
this is mousedown event
this is mouseup event
this is click event
可以看到，mousedown 和mouseup是優(yōu)先于click事件先執(zhí)行的。
而我們希望的效果是，在移動元素的操作中不執(zhí)行click事件，在執(zhí)行click事件時不調(diào)用mousedown和mouseup方法。
區(qū)分click事件和鼠標拖拽元素后在松開事件其實很簡單，用一個全局標識符就可以了。
我們不用在為元素綁定click事件，而是只使用它的mousedown,mousemove,mouseup事件來判斷是否該元素被拖拽了。
具體參見代碼，可以看注釋：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><script src="js/jquery-1.11.2.js"></script><script>$(function(){var hasMove=false; //全局標識，初始化標識元素沒有發(fā)生mousemove $("#mydiv").on("mousedown",function(){hasMove=false;});$("#mydiv").on("mouseup",function(){//根據(jù)是否發(fā)生移動狀態(tài)來模擬click事件和拖拽后釋放鼠標事件if(hasMove){console.log("移動后鼠標松開事件");}else{console.log("沒有移動鼠標松開事件,模擬click");}hasMove=false; //還原標識，以便下一次使用 });$("#mydiv").on("mousemove",function(){hasMove=true; //元素移動事件中跟新標識為true，表示有發(fā)生移動 });});</script> </head> <body><div id="mydiv" style="width:200px;height:200px;background: red;"> </div> </body> </html>效果和控制臺如圖
如此，放棄使用click事件機制，以mousemove事件和mouseup事件動態(tài)改變?nèi)謽俗R符，來區(qū)分在鼠標釋放一刻元素是否發(fā)生移動，以此來判斷該事件是click還是拖拽。
感謝閱讀。
?
轉(zhuǎn)載于:https://www.cnblogs.com/chunyangji/p/5896933.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript区分click事件和mousedown（mouseup、mousemove）方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学数解题160919
- 下一篇： 第一百零二节，JavaScript函数