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