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向左滑动，当它在mosue光标下滑动时，它会在所有列表项滚动时触发翻转动画。

有没有办法在onclick项目上禁用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) {中？不是最优雅的解决方案，但它会起作用......

单击时禁用鼠标悬停

2 个答案: