8

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

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

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

编辑：

这让我感到惊讶，因为 url bar 不在document（也许在window？）并且 Firefox 没有这种行为。当我查找时e.target，Chrome Inspector 显示body。

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

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

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

4

4 回答 4

9

发生这种情况是因为一旦您在多功能框中按 Enter 键，焦点就会转到页面。如果您尝试使用 进行相同的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>

演示。

制作您自己的 HTML 页面并最好尝试一下，因为 PasteHTML.com 会将其填充到 iframe 中。为了让它在那里正常工作，首先单击文本以赋予 iframe 焦点。

演示。 请记住使用鼠标专注于多功能框和类型，而不是键盘快捷键。（这会触发 onkeydown 事件，造成误报）

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

于 2012-08-25T05:46:56.927 回答
2

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

请注意，查找特定键码可能会否定您的问题。祝你好运。

于 2012-08-25T07:07:07.943 回答
1

您可以过滤键码...如果有帮助...13 是输入键

$(document).on('keyup', function(event){
  if( parseInt(event.keyCode,10) !== 13 ){
      alert("Hey");
  } 
});​
于 2012-08-24T14:35:42.027 回答
0

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

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

function log(e) {
    console.log(e.target.localName);
}
于 2012-08-26T15:48:09.450 回答