Javascript jQuery-don'；t火'；单击'；在'；mousemove'；

我创建了一个示例来演示我的情况

我不想在用户平移时触发click事件——只要它只是一次简单的单击。我尝试了.off（）和.on（）的不同位置，但都没有效果

---

提前感谢您的帮助。

区分“点击”和“平移”的唯一方法是按住鼠标的时间。您可以在mousedown中创建一个日期，然后在mouseup中创建另一个日期，并且只有当两个日期之间的差异大于某个阈值时才触发您的click（zoom）事件（我猜是1/10秒，但您可能希望进行实验）

您可以使用

mousemove

/

mousedown

事件来设置一个标志，该标志可在

单击事件处理程序中使用，以确定用户是单击还是平移。比如：

//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');
    }
});​​

这里是一个演示：
在点击事件中，您可以检测鼠标是被按下还是被按下。让我们分析一下：

DRAG:
mouse down
mosue position changes
mouse up

CLICK:
mouse down
mouse up

您可以看到-不同之处在于鼠标位置的改变。您可以在鼠标下键中记录单击坐标，然后在muse返回时进行比较。如果在某个树状目录中，则操作是单击。
我添加了一个“平移”布尔值以解决您的问题：

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

看

基本上，如果用户有mousedown和mousemove，则平移是正确的。一旦鼠标平移是错误的。如果只是鼠标向下移动，平移为假，因此缩放。

更新你的小提琴来做你想做的事。我将事件的重新绑定设置为超时，这样它就不会立即触发，并将mousemove调整为
此解决方案解决了您的问题：

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

基本上，只有当鼠标没有在
mousedown
和
mouseup
事件之间移动时，它才会调用
doZoom（）。因为您将快速拖动解释为点击。@RokKralj这就是为什么您需要进行试验并找到一个适合您的用户的阈值。在处理阈值时，从来没有一个正确的答案。但每个用户都是不同的。。。这似乎太有限了。只要在鼠标移动时设置一个标志。然后在
click
事件处理程序中，查看是否设置了该标志并分别清除它。您的小提琴仍然存在一个问题，即在每个
mouseup
事件上绑定
click
事件处理程序。您是对的，但我只是提供了一个问题的解决方案，没有修复代码逻辑中的所有问题。可以添加简单的逻辑来防止这种情况发生。在我看来，我的解决方案是用户所期望的——当鼠标没有在
mousedown
和
mouseup
事件之间移动时，单击只是一次单击。谢谢（很抱歉耽搁了，我去度了一个长假）