双重执行.焦点和单击事件的跨浏览器事件处理程序

Question

我有一个对复杂导航UI很重要的函数，所以我希望它是键盘可访问的。我正在使用单击和焦点编写处理程序：

$('.mycoolnavbutton').on("click focus", function() {
   // do an animated reveal
});

问题是：如前所述，我在 Firefox 中得到了双重执行（和不稳定的行为），因为点击事件触发了焦点事件。一切都执行（和console.logs）两次。（Webkit 只执行一次。

我突然想到，我可以将点击处理程序"管道"到焦点：

$('.mycoolnavbutton').on("click", function(event) {
   event.preventDefault();
   this.focus();
});
$('.mycoolnavbutton').on("focus", function() {
   // do an animated reveal
});

但这似乎真的很奇怪且容易出错。我敢肯定，我不是第一个遇到这种困境的人。标准解决方案是什么？

Answer 1

首先，我想问你为什么在键盘焦点获得按钮时触发按钮？ 按钮通常在获取焦点后按空格键或回车键通过键盘触发，并且在获取焦点时不会触发。

然后，由于这两个事件是完全独立的，并且无法知道一个事件是否会导致另一个事件，我可以想到这些可能性来确保你只触发一次事件：

处理

1. 其中一个事件时，请设置一些状态来记录处理该事件的时间，然后在该时间的 xx 毫秒内忽略任何其他触发器。

2. 或者，完成同一件事的方式略有不同。 触发事件时，执行 setTimeout，并且在计时器触发之前不要再次处理事件，从而防止在短时间内触发两次。