js拖拽时禁止触发单击事件的方法三种方法

最新推荐文章于 2024-11-09 08:43:26 发布

愚舜

最新推荐文章于 2024-11-09 08:43:26 发布

阅读量6.3k

点赞数 5

分类专栏：事件监听 javascript

本文链接：https://blog.csdn.net/first_shun/article/details/108814193

版权

当元素同时有拖拽和单击事件时，拖拽后会触发单击事件。本文介绍了三种防止这种情况的方法：1) 在mousemove中设置状态并在click中检查；2) 通过按下时间判断（150ms内为单击，超过为拖拽）；3) 检查元素位置变化来区分拖拽和单击，推荐使用位置变化的方法。

摘要由CSDN通过智能技术生成

在一个元素既有拖拽事件，又有单击事件的时候，会发现每一次拖拽后都会触发元素的单击事件，所以我们得在拖拽事件的时候屏蔽掉元素的单击事件所绑定的方法。元素拖拽和单击事件触发的顺序是mosuedown,mousemove,mouseup,click，所以就需要针对这个事件顺序在拖拽的时候屏蔽单击事件。主要有以下三种方法来在拖拽事件中屏蔽掉单击事件的执行：

1、监听mousemove事件，在mousemove中加状态，在click事件中监听该状态

        var elIsMove = false; //定义状态
        //拖拽事件
        element.onmousedown = function (evt) {

            document.onmousemove = function (evt) { //实时改变目标元素element的位置
                elIsMove = true;    //在元素移动的时候改变状态
            }
            //停止拖动
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
        //click事件
        element.onclick = function (e) {
            if (elIsMove) {
                elIsMove = false;    //如果状态是true，则证明元素被移动过，不触发click调用的方法
                return;

最低0.47元/天解锁文章