Question

我有一个相当大的html页面，我注意到我的点击显示/隐藏过程似乎有点迟钝。

我还发现，如果我使用“mouseenter”代替“click”，响应几乎是瞬间的（而不是我使用“click”时的2秒）。

$("button.showhide").click(function() { $("#"+$(this).attr("id")+"-1").toggle() });

versus

$("button.showhide").mouseenter(function() { $("#"+$(this).attr("id")+"-1").toggle() });

有没有办法让click事件和mouseenter事件一样快？

感谢。

编辑：以下是否有助于解释此行为？（没有提到mouseenter的“javascript事件”。）

。点击（）将事件处理程序绑定到“单击”JavaScript事件，或在元素上触发该事件。

.mousedown（）将事件处理程序绑定到“mousedown”JavaScript事件，或在元素上触发该事件。

.mouseenter（）将鼠标进入元素时触发的事件处理程序绑定，或者触发元素上的处理程序。

Answer 1

您应该使用委托来触发事件（从jQuery 1.7使用on方法进行事件绑定）：

$("button").on('click','.showhide',function(){/*...*/});

您可以提高事件处理的速度，但这取决于html标记例如，如果你的所有showhide按钮都被分组在某个div中，而其他一些按钮则分布在整个身体中，那么你应该使用以下内容：

$("button-container-selector").on('click','button.showhide',function(){/*...*/});

Answer 2

我认为是时候处理了

function() { $("#"+$(this).attr("id")+"-1").toggle();

在两种情况下完全相同，只是因为mouseenter比click更早触发，所以你认为它更快。

我能想到的唯一一件事就是你有很多点击处理程序，但我认为你真的很想放慢速度

编辑 - 尝试

$('body').on("click", "button.showhide", function() { $("#"+$(this).attr("id")+"-1").toggle());

Answer 3

通过阅读所有先前的答案以及问题中解释的行为，我认为可能缺少一个关键信息。您的测试是在平板电脑或支持触控的设备中进行的吗？

某些启用触摸功能的浏览器或设备会降低点击事件的速度以延迟，因此用户可以启动手势而不是发出点击。这可以解释为什么，在您的情况下，“mousedown”或“click”比“mouseenter”慢，一旦触摸到被监视的元素，触摸设备就会发生这种情况。

如果是这种情况，我将采取哪些措施来提高响应能力并在不同类型的设备中兼容，将“mousedown”和“touchstart”（与启用触摸的设备兼容）绑定到必须执行的代码之后鼠标按下（或屏幕触摸）。

在你的情况下：

$("button.showhide").bind('touchstart mousedown', function() {
    $("#"+$(this).attr("id")+"-1").toggle()
});

我希望这会有所帮助。

Jquery .mouseenter（）事件比.click（）或.mousedown（）事件快得多

3 个答案: