你的位置:首页 > Java教程

[Java教程]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="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>

上述代码在控制台的输出结果如下:

this is mousedown event
this is mouseup event
this is click event

可以看到,mousedown 和mouseup是优先于click事件先执行的。

而我们希望的效果是,在移动元素的操作中不执行click事件,在执行click事件时不调用mousedown和mouseup方法。

区分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; //全局标识,初始化标识元素没有发生mousemove      $("#mydiv").on("mousedown",function(){        hasMove=false;      });      $("#mydiv").on("mouseup",function(){        //根据是否发生移动状态来模拟click事件和拖拽后释放鼠标事件        if(hasMove){          console.log("移动后鼠标松开事件");        }else{          console.log("没有移动鼠标松开事件,模拟click");        }        hasMove=false; //还原标识,以便下一次使用      });      $("#mydiv").on("mousemove",function(){        hasMove=true;  //元素移动事件中跟新标识为true,表示有发生移动      });    });  </script></head><body>  <div id="mydiv" style="width:200px;height:200px;background: red;"></div></body></html>

效果和控制台如图

如此,放弃使用click事件机制,以mousemove事件和mouseup事件动态改变全局标识符,来区分在鼠标释放一刻元素是否发生移动,以此来判断该事件是click还是拖拽。

感谢阅读。