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

时间:2015-12-13 17:27:15

标签: javascript jquery onclick mousedown mouseup

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

如何在拖动时禁用点击功能?

以下是我所拥有的:

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) {
       });
   });
});

由于

1 个答案:

答案 0 :(得分:0)

这似乎可以解决问题:

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;
    }
});

});