jquery鼠标事件冲突？

我试图做一个拖动和滚动我的一个divs“专辑”，这是一个图像列表。jquery鼠标事件冲突？

这里就是我所做的

$(album).on({ 
    mousedown:function(){ 
     console.log('mousedown'); 
     $(album).on('mousemove', function(){ 
      console.log('mousemove') 
     }) 
    } 

    mouseup:function(){ 
     console.log('mouseup'); 
     $(album).off('mousemove'); 
    } 

})

这里发生的事情是，之后按下鼠标，将描绘出“鼠标移动”约4或则5次，将停止跟踪，和一点点没有动作图标露面与我点击的图像的透明版本。然后，如果我在这里放开鼠标，它不会追踪'mouseup'。但是，如果我点击该div并且不移动我的鼠标，那么放开它，它会追踪'mouseup'。

为什么控制台不能继续追踪鼠标移动，为什么不追踪mouseup？谢谢。

来源

2012-11-10 shibbydoo

我有一个完整的工作例子:) – VIDesignz

你有这个人的运气？ – VIDesignz

我有一个理论，上面代码中的错误是由于事件点击事件只会触发一次，并且您希望mousemove上持续状态。 VIDesign通过阻止click事件的默认行为解决了这个问题，并且通过为mousemove事件创建依赖项来解决此问题。这取决于你喜欢哪个答案。 –

在这里，你去的人！完善！！

工作Fiddle

HTML

<div class='album'></div>

JQuery的

$('body').on('mousedown', '.album', function(e){ 
    e.preventDefault(); 
    console.log('mousedown'); 

    $(this).on('mousemove', function(){ 
     console.log('mousemove'); 
    }); 

    $(this).on('mouseup', function(){ 
     $(this).off('mousemove'); 
     console.log('mouseup'); 
    }); 

});

来源

2012-11-10 02:45:42 VIDesignz

非常感谢！但为什么我必须阻止默认操作才能使其工作？ – shibbydoo

@shibbydoo您的欢迎！我无法肯定地说......当我测试你的原版时，我在其他mousedown上获得了mousemove日志，因此我认为mousedown/mouseup与标准点击功能之间存在干扰。这只是猜测。我敢肯定，如果我们记录所有鼠标事件，看看它们是如何真正对彼此做出反应的，我们可以搞清楚。但现在，我会说'拿你能得到'这个！ :) – VIDesignz

如果我们去了解它以不同的方式：

var itIsClicked; 

$(album).on("mousedown", function(){ 
    itIsClicked = true; 
}); 

$(album).on('mousemove', function(){ 
    if(itIsClicked) { 
     console.log('mousemove'); 
    } 
}); 

$(album).on("mouseup", function(){ 
    itIsClicked = false; 
});

嵌套事件虽然看起来有意义，但可能会遇到您所描述的那种麻烦。虽然我很想听听有关它为什么不适合你的任何理论。

来源

2012-11-10 03:59:45

看来如果我们阻止点击操作的默认值，它会清理。当我在上面解释我的答案时，如果没有预设的默认设置，它会在您第一次点击，拖动，释放时起作用，但它会以某种方式翻转功能。当你点击时，它不起作用，但是当你没有按下按钮时移动鼠标，它将注册鼠标移动。虽然不能解释为什么。 – VIDesignz

我测试了我们的两个答案，看起来他们各自都有效。我们将不得不运行测试来查看哪些答案应该被接受。 –

jquery鼠标事件冲突？

回答

相关问题