Question

我创建了一个Fiddle来证明我的情况。

我想在用户平移时不会触发click事件 - 只需要点击一下即可。我已经尝试过.off（）和.on（）的不同位置无济于事。

提前感谢您的帮助。

Answer 1

更新你的小提琴，做你想做的事。我把事件的重新绑定设置为超时，因此它不会立即触发，并将mousemove调整为

Answer 2

在点击事件中，您可以检测鼠标是否按下了DOWN或UP。那么让我们分析一下：

DRAG:
mouse down
mosue position changes
mouse up

CLICK:
mouse down
mouse up

你看 - 差异是改变鼠标位置。您可以在鼠标按下记录点击坐标，然后在缪斯恢复时进行比较。如果在某个阈值内，则是一次点击。

Answer 3

在“点击”和“平移”之间判断的唯一方法是鼠标停留的时间。你可以在mousedown中创建一个Date，然后在mouseup中创建另一个Date，如果两个日期之间的差异大于某个阈值，我只会触发你的点击（缩放）事件（我猜是1/10秒，但你可以想要试验）

Answer 4

您可以使用mousemove / mousedown事件设置可在click事件处理程序中使用的标志，以确定用户是单击还是平移。类似的东西：

//set a flag for the click event to check
var isClick = false;

//bind to `mousedown` event to set the `isClick` flag to true
$(document).on('mousedown', function (event) {
    isClick = true;

//bind to `mousemove` event to set the `isClick` flag to false (since it's not a drag
}).on('mousemove', function () {
    isClick = false;

//bind to `click` event, check to see if the `isClick` flag is set to true, if so then this is a click, otherwise this is a drag
}).on('click', function () {
    if (isClick) {
        console.log('click');
    } else {
        console.log('drag');
    }
});

以下是演示：http://jsfiddle.net/SU7Ef/

Answer 5

我添加了一个“平移”bool来解决您的问题：

请参阅http://jsfiddle.net/syTKq/4/

基本上，如果用户有mousedown和mousemove，则平移为真。一旦mouseup平移是错误的。如果只是mousedown，则平移是假的，因此放大。

Answer 6

此解决方案可以解决您的问题：

var bClicking = false,
    moved = false;;
var previousX, previousY;
var $slider = $('#slider'),
    $wrapper = $slider.find('li.wrapper'),
    $img = $slider.find('img.foo');

$img.on('click', function()
{
    if(!moved)
    {
        doZoom();
    }
});

$wrapper.mousedown(function(e) {
    e.preventDefault();

    previousX = e.clientX;
    previousY = e.clientY;
    bClicking = true;
    moved = false;
});

$(document).mouseup(function(e) {
    bClicking = false;
});

$wrapper.mousemove(function(e) {
    if (bClicking)
    {
        moved = true;
        var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
        var directionY = (previousY - e.clientY) > 0 ? 1 : -1;

        $(this).scrollLeft($(this).scrollLeft() + 10 * directionX);
        $(this).scrollTop($(this).scrollTop() + 10 * directionY);

        previousX = e.clientX;
        previousY = e.clientY;
    }
});

function doZoom() {
    $img.animate({
        height: '+=300',
        width: '+=300'
    }, 500, function() {
        //animation complete
    });
}

基本上，仅当鼠标未在doZoom()和mousedown事件之间移动时，它才会调用mouseup。

jQuery - 不要在'mousemove'上点击'click'

6 个答案: