0

我有一个对复杂导航 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
});

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

4

1 回答 1

0

首先，我会问为什么当它获得键盘焦点时你会触发一个按钮？按钮通常在获取焦点后通过按空格键或回车键通过键盘触发，而仅在获取焦点时不会触发。

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

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

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

于 2012-09-19T06:41:12.763 回答