在Chrome的Ominbox上按下Enter键时，键盘事件监听器将触发

Question

在Chrome浏览器中，使用此代码段时：

  $(document).on('keyup', function(){
    alert("Hey");
  });

每当我按下url栏中的enter键时（例如，当我剪切并粘贴页面本身的url时），事件监听器就会触发。 为什么会这样？

编辑：

它让我感到惊讶，因为url bar不在document （可能在window ？）而firefox没有这种行为。 当我查找e.target ，Chrome Inspector会显示body 。

我认为这可能是由事件冒泡引起的所以我试过这个：

  $(document).on('keyup', function(e){
    e.stopPropagation();
    alert("Hey");
  });

但它不起作用。 如何防止它被触发？

Answer 1

发生这种情况是因为一旦你在多功能框中输入，焦点就会转向页面。 如果你用onkeydown尝试过同样的事情，多功能框就不会改变，因为正如你所说，它不是文档的一部分。 过滤多功能框的错误事件的一种方法是检查每个keyup是否有一对keydown。

<script>
var down = false;
document.addEventListener('keydown', function (){
    down = true;
}, false);

document.addEventListener('keyup', function (){
    if(down === true){
        alert('It was from the page!');
    }
    else{
        alert('Omnibox. Ignore it.');
    }
    down = false;
}, false);

</script>

演示。

\n

制作自己的HTML页面并优先尝试，因为PasteHTML.com将其填充到iframe中。 要使其在此处正常工作，请先单击文本以获得iframe焦点。

演示。 请记住使用鼠标将焦点放在多功能框上并键入，而不是键盘快捷键。 （这会引发onkeydown事件，造成误报）

更新：从Chrome 35开始，这种情况不再发生了。 但是，我不知道他们修复了哪个版本。

Answer 2

Chrome的解决方案很简单：使用keypress而不是keyup 。 这并不适用于所有情况（IE），因此您可能必须添加条件才能根据浏览器切换类型。 但是，这将解决您的问题。

请注意，查找特定的密钥代码可能会使您的问题无效。 祝好运。

Answer 3

因为keyup当任何按键在键盘上公布的情况，这就是触发事件。 当文档没有焦点时，Chrome只会在使用代码段时触发此事件。

Answer 4

您可以过滤密钥代码...如果有帮助... 13输入密钥

$(document).on('keyup', function(event){
  if( parseInt(event.keyCode,10) !== 13 ){
      alert("Hey");
  } 
});​

Answer 5

一种可能的解决方案是稍微延迟“keyup”事件处理程序注册。 这将跳过Chrome和Safari中似乎发生的第一个“虚假”触发器。

$(function() {
    setTimeout(
        function() {
            console.log("Delayed event attachment");
            $(document).bind('keyup', log);
        }, 10);
});

function log(e) {
    console.log(e.target.localName);
}