使用 Mouseup/Down 拖动时防止单击事件

Question

我正在使用 mousedown/mouseup 解决方案进行单击和拖动导航，但是如果将鼠标悬停在 link 上并拖动它，则在释放单击时会触发 link。

如何禁用拖动时的点击功能？

这是我得到的：

jQuery(document).ready(function($) {

   $(".main-container").mousedown(function(e) {
       e.preventDefault();
       down = true;
       x = e.pageX;
       y = e.pageY;
       top = $(this).scrollTop();
       left = $(this).scrollLeft();
       $(event.toElement).one('click', function(e) {
       });
   });

   $("body").mousemove(function(e) {
       if (down) {
           var newX = e.pageX;
           var newY = e.pageY;

           //console.log(y+", "+newY+", "+top+", "+(top+(newY-y)));

           $(".main-container").scrollTop(top - newY + y);
           $(".main-container").scrollLeft(left - newX + x);
       }
   });

   $("body").mouseup(function(e) {
       down = false;
       $(event.toElement).one('click', function(e) {
       });
   });
});

谢谢

Answer 1

这似乎可以解决问题：

jQuery(document).ready(function($) {

var x, y, top, left, down;

$(".main-container").mousedown(function(e) {
    e.preventDefault();
    down = true;
    x = e.pageX;
    y = e.pageY;
    top = $(this).scrollTop();
    left = $(this).scrollLeft();
    timestamp = new Date().getTime();
});

$("body").mousemove(function(e) {
    if (down) {
        var newX = e.pageX;
        var newY = e.pageY;

        $(".main-container").scrollTop(top - newY + y);
        $(".main-container").scrollLeft(left - newX + x);
    }
});

$("body").mouseup(function(e) {
    down = false;
});

$(".main-container").click(function(event) {
    var interval = 350;
    var timestamp2 = new Date().getTime();
    if ((timestamp2 - timestamp) > interval) {
        return false;
    }
});

});

使用 Mouseup/Down 拖动时防止单击事件

Prevent Click Event When Dragging Using Mouseup/Down

javascript

jquery

onclick

mousedown

mouseup