单击时禁用悬停

Question

我有一个 div，里面有一个无序列表，当你点击一个 LI 项目时它会向左滑动。

<div id="products">
<ul>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a></li>
</ul>

问题是，当您单击列表项时，div 向左滑动，当它在鼠标光标下滑动时，它会在所有列表项滚动时触发滚动动画。

有没有办法在点击项上禁用 javascript？

我试过了：

$("#products li a").click(function(event){
event.preventDefault();
});
}

但这似乎不起作用，因为动画仍然在悬停的其他列表项上继续？

Answer 1

您可以在单击事件中解除悬停事件与列表项的绑定：

$("#products li a").click(function(){
    $("#products").find('li').unbind('mouseenter');
});

这段代码假定您绑定到 mouseenter 事件（而不是 mouseover 事件）。

如果您希望在动画调用中使用回调函数，则可以在动画完成后将悬停事件处理程序重新应用于列表项：

$("#products").animate({left: '-=100px'}, function () {
    $("#products").find('li').bind('mouseenter', function () {
        //add hover code here
    });
});

Answer 2

您可以在 onclick 中将全局范围内的变量设置为 true，然后在 onmouseover 中将整个内容包装在 if (!varSetOnClick) { 中？不是最优雅的解决方案，但它会工作......