在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果。而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouseup事件。但mousedown、mouseup就会和click事件发生冲突。我们 ...
在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果。而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouseup事件。但mousedown、mouseup就会和click事件发生冲突。我们希望在拖拽元素的时候不希望它执行click方法,在执行click方法是不希望执行mousedown和mouseup方法。
比如如下代码,就会出现上面的问题:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src='/images/loading.gif' data-original="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>
原标题:JavaScript区分click事件和mousedown(mouseup、mousemove)方法
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。