JavaScript区分click事件和mousedown（mouseup、mousemove）方法

最新推荐文章于 2024-01-23 16:56:48 发布

weixin_30578677

最新推荐文章于 2024-01-23 16:56:48 发布

阅读量929

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/chunyangji/p/5896933.html

版权

在前端开发工作中，会遇到这样问题：针对同一个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还是拖拽。

感谢阅读。

转载于:https://www.cnblogs.com/chunyangji/p/5896933.html

weixin_30578677

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript区分click事件和mousedown（mouseup、mousemove）方法

在前端开发工作中，会遇到这样问题：针对同一个dom元素，即希望为它绑定click事件，又想该元素可以允许拖拽的效果。而使用拖拽的效果，我们一般就会用到mousedown,mousemove和mouseup事件。但mousedown、mouseup就会和click事件发生冲突。我们希望在拖拽元素的时候不希望它执行click方法，在执行click方法是不希望执行mousedown和mouseup方法。...
复制链接

扫一扫