Jquery .mouseenter() 事件比 .click() 或 .mousedown() 事件快得多答案

【问题标题】：Jquery .mouseenter() event is very much faster than .click() or .mousedown() eventsJquery .mouseenter() 事件比 .click() 或 .mousedown() 事件快得多
【发布时间】：2016-01-18 14:27:13
【问题描述】：

我有一个相当大的 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 事件”。）

.click() 将事件处理程序绑定到“单击”JavaScript 事件，或在元素上触发该事件。

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

.mouseenter() 绑定要在鼠标进入元素时触发的事件处理程序，或在元素上触发该处理程序。

【问题讨论】：

您尝试过.mousedown 事件吗？释放鼠标按钮后触发点击，所以事件顺序为mousedown -> mouseup -> click。
是的，我确实尝试过 mousedown 事件，但它和 click 事件一样慢。

标签： javascript jquery

【解决方案1】：

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

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

您可以提高事件处理的速度，但这取决于 html 标记。
例如，如果您的所有showhide 按钮都分组在某个 div 中，而其他一些按钮则分散在身体各处，您应该使用这样的东西：

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

【讨论】：

这正是他正在做的事情
第二个例子更好地说明了委托应该如何提高你的事件处理响应速度
是的，第二个例子更好，但它没有解释为什么 mouseenter 事件快而点击事件“慢”，因为 OP 对两个事件处理程序使用了相同的选择器

【解决方案2】：

我认为处理时间

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

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

我唯一能想到的是你有很多点击处理程序，但我认为你真的需要很多来减慢速度

编辑 - 尝试做

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

【讨论】：

不怕。区别在于 2 秒和瞬时响应。
@user918081 同一个函数不能有不同的执行时间......如果点击它“更长”是因为调用函数需要更多时间，而不是执行它
但这就是我所观察到的。我做了一个测试，我在函数的第一条语句中插入了一条警告语句。对于“mouseenter”事件，我会立即看到警报消息框。对于“click”事件，msgbox 在 2 秒后弹出。后端的某些东西似乎阻止了“点击”？
@user918081 可能你有太多的事件处理程序。有多少button.showhide 元素？它们没有容器对象吗？试试我现在发布的代码（我假设你使用 jQuery 1.7 或更高版本
我试过你的代码，但不幸的是，事情没有改变。确实有很多 button.showhide 元素。但是在同类情况下，我还是很好奇为什么“mouseenter”会这么快。

【解决方案3】：

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

一些支持触摸的浏览器或设备会减慢点击事件以允许延迟，因此用户可以开始手势而不是发出点击。这可以解释为什么在您的情况下，“mousedown”或“click”比“mouseenter”慢，在触摸设备中，一旦您触摸被监控的元素，就会发生这种情况。

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

在你的情况下：

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

我希望这会有所帮助。

【讨论】：