[JS]如何区分拖拽和点击事件/用插件（draggabilly.js）的时候当拖拽的时候禁止点击

第一种方法，当你可以检测到mouseup和mousedown的时候【适合原生，用了插件发现把我的鼠标事件屏蔽了吐血……

click点击事件=mouseup+mousedown

drag拖拽=mousedown+mousemove+mouseup

所以你可以设置flag

var a = $('a'),
      flag = 0;    //标记是拖曳还是点击

a.bind({
    mousedown:function(e) {
        flag = 0;
        //code...
    },
    mousemove:function(e) {
        flag = 1;
        //code...
    },
    mouseup:function(e) {
        if(flag === 0) {//点击
            a.unbind();
        } else if(flag === 1) {//拖曳
            a.bind('click',function(){
                return false; //阻止默认行为
            });
        }
        //code...
    }
});

 

第二种，判断坐标，对我的插件无效- -，但是思路可供参考

 judgeMoveEvent() {


        console.log('judgeMoveEvent')

        var EventUtil = {
            // 添加绑定事件
            addHandle: function (element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                } else {
                    element["on" + type] = handler;
                }
            },
            // 移除绑定事件
            removeHandler: function (element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                } else {
                    element["on" + type] = null;
                }
            }


        }

        var beginX, // 起始位置
            beginY,
            endX,   // 结束位置
            endY;

        // 计算起始位置和结束位置
        document.getElementById("floor-show-svg").addEventListener("mousedown", function (e) {
            console.log("mousedown");

            beginX = e.clientX;
            beginY = e.clientY;
        }, false)
        document.getElementById("floor-show-svg").addEventListener("mouseup", function (e) {
            console.log('mouseup')
            endX = e.clientX;
            endY = e.clientY;
        }, false)

        // 判断是否要跳转
        EventUtil.addHandle(document.getElementById("floor-show-svg"), "click", function () {
            if (!isdrag(beginX, beginY, endX, endY)) {
                console.log("click");
            } else {
                console.log("好烦啊搞什么鬼");

            }
        })

        // 判断是否拖动了，这里我设置了1px，大家可以根据自己来进行修改吧
        function isdrag(x1, y1, x2, y2) {
            if (Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)) <= 7) {
                return false;
            }
            return true;
        }


    }

第三种，利用css的pointer-events:none;

.disabled {
pointer-events:none;
}

用了插件发现无法捕捉mouseup和mousedown事件了- -，于是翻天覆地找api终于让我给找到了

dragStart
Triggered when dragging starts and the element starts moving. Dragging starts after the user's pointer has moved a couple pixels to allow for clicks.

// jQuery
$draggable.on( 'dragStart', function( event, pointer ) {...})
// vanilla JS
draggie.on( 'dragStart', function( event, pointer ) {...})
event - Type: Event - the original mousedown or touchstart event
pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY
dragMove
Triggered when dragging moves.

// jQuery
$draggable.on( 'dragMove', function( event, pointer, moveVector ) {...})
// vanilla JS
draggie.on( 'dragMove', function( event, pointer, moveVector ) {...})
event - Type: Event - the original mousemove or touchmove event
pointer - Type: MouseEvent or Touch - the event object that has .pageX and .pageY
moveVector Type: Object - How far the pointer has moved from its start position { x: 20, y: -30 }
dragEnd
Triggered when dragging ends.

// jQuery
$draggable.on( 'dragEnd', function( event, pointer ) {...})
// vanilla JS
draggie.on( 'dragEnd', function( event, pointer ) {...})

解决方法（拖拽产生的时候用CSS禁止掉所有事件，然后调用即可）

CSS里

.disabled {
pointer-events:none;
}

  static setDisableDraggable(){
        draggable.on( 'dragStart', function( event, pointer ) {
            $('#floor-draggable').addClass('disabled')
        })
        draggable.on( 'dragEnd', function( event, pointer ) {
            $('#floor-draggable').removeClass('disabled')
        })
    }