你的位置:首页 > 软件开发 > Java > JavaScript区分click事件和mousedown(mouseup、mousemove)方法

JavaScript区分click事件和mousedown(mouseup、mousemove)方法

发布时间:2016-09-22 17:00:47
在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果。而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouseup事件。但mousedown、mouseup就会和click事件发生冲突。我们 ...

JavaScript区分click事件和mousedown(mouseup、mousemove)方法

前端开发工作中,会遇到这样问题:针对同一个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 (#换成@)。