javascript 在 Chrome 的 Ominbox 上按下 Enter 键时会触发 Keyup 事件侦听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11991062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keyup event listener fires when enter is pressed on Chrome's Ominbox
提问by Manuel Bitto
In chrome browser, when using this snippet:
在 Chrome 浏览器中，使用此代码段时：
$(document).on('keyup', function(){
alert("Hey");
});
Every time I press enterin the url bar (for example when I cut and paste the url of the page itself) the event listener fires.
Why does it happen?
每次我按下enterurl 栏（例如，当我剪切和粘贴页面本身的 url 时），事件侦听器都会触发。为什么会发生？
EDIT:
编辑：
It surprised me because url bar is not in document(maybe in window?) and firefox does not have this behaviour. When I look for e.target, Chrome Inspector shows body.
这让我感到惊讶，因为 url bar 不在document（也许在window？）中，而 firefox 没有这种行为。当我寻找时e.target，Chrome Inspector 显示body.
I thought this could be caused by event bubbling so I tried this:
我认为这可能是由事件冒泡引起的，所以我尝试了这个：
$(document).on('keyup', function(e){
e.stopPropagation();
alert("Hey");
});
But it doesn't work. How can I prevent it from being triggered?
但它不起作用。我怎样才能防止它被触发？
回答by Some Guy
This happens because once you hit enter in the omnibox, the focus turns to the page. If you tried the same thing with onkeydown, the omnibox would change nothing, because as you said, it isn't a part of the document. One way to filter the omnibox's false event out would be to check that every keyuphas a pair keydown.
发生这种情况是因为一旦您在多功能框中按 Enter 键，焦点就会转到页面上。如果你用 尝试同样的事情onkeydown，多功能框不会改变任何东西，因为正如你所说，它不是文档的一部分。过滤多功能框的 false 事件的一种方法是检查每个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>
Make your own HTML page and try it preferably, because PasteHTML.com stuffs it into an iframe. For it to work correctly there, click on the text first to give the iframe focus.
制作您自己的 HTML 页面并最好尝试一下，因为 PasteHTML.com 将其填充到 iframe 中。为了让它在那里正常工作，首先单击文本以提供 iframe 焦点。
Demo.Remember to use your mouse to focus on the omnibox and type, not a keyboard shortcut. (That fires the onkeydown event, creating a false positive)
演示。请记住使用鼠标专注于多功能框并键入，而不是键盘快捷键。（这会触发 onkeydown 事件，造成误报）
Update:As of Chrome 35, this doesn't happen anymore. I don't know which version they fixed it on, however.
更新：从 Chrome 35 开始，这种情况不再发生。但是，我不知道他们修复了哪个版本。
回答by jedd.ahyoung
The solution for Chrome is simple: use keypressinstead of keyup. This doesn't work in all cases (IE), so you may have to add a conditional to switch the type depending on the browser. However, this will solve your issue.
Chrome 的解决方案很简单：使用keypress而不是keyup. 这并不适用于所有情况 (IE)，因此您可能需要添加条件以根据浏览器切换类型。但是，这将解决您的问题。
Note that looking for a specific keycode may negate your issue. Good luck.
请注意，查找特定键码可能会否定您的问题。祝你好运。
回答by Less
You could filter for the keycode ...if that helps...13 is enter key
您可以过滤键码...如果有帮助...13 是输入键
$(document).on('keyup', function(event){
if( parseInt(event.keyCode,10) !== 13 ){
alert("Hey");
}
});?
回答by RajV
A possible solution is to slightly delay the "keyup" event handler registration. This will skip the first "spurious" trigger that seems to happen in Chrome and Safari.
一个可能的解决方案是稍微延迟“keyup”事件处理程序注册。这将跳过似乎在 Chrome 和 Safari 中发生的第一个“虚假”触发器。
$(function() {
setTimeout(
function() {
console.log("Delayed event attachment");
$(document).bind('keyup', log);
}, 10);
});
function log(e) {
console.log(e.target.localName);
}
回答by user1601369
Because keyuphappens when any key is released on your keyboard, that's what fires the event. Chrome just triggers this event when a document doesn't have focus, apparently, when using a snippet.
因为keyup在键盘上释放任何键时会发生，这就是触发事件的原因。Chrome 只会在文档没有焦点时触发此事件，显然，在使用代码段时。
