Question

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

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

这是问题所在：正如所写的那样，我在Firefox中获得了双重执行（以及不稳定的行为），因为click事件会触发焦点事件。一切都执行（和console.logs）两次。（Webkit只执行一次。）

我想到我可以将点击处理程序“管道”到焦点上：

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

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

Answer 1

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

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

处理其中一个事件时，请设置一些记录处理事件的时间的状态，然后在该时间的xx毫秒内忽略任何其他触发器。
或者，完成同样事情的方式略有不同。当您触发事件时，请执行setTimeout并且不要再次处理该事件，直到计时器触发，从而使您不会在短时间内触发两次。

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

1 个答案: