Javascript 输入触发按键事件两次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7987454/
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
Input Fires Keypress Event Twice
提问by bear
This question has been asked/answered (mostly) before, BUT I've tried three things to stop the event from bubbling but nothing has worked:
这个问题之前已经被问过/回答过（主要是），但我已经尝试了三件事来阻止事件冒泡，但没有任何效果：
return false;
e.stopPropagation();
e.preventDefault();
(return false should take care of the other two,correct?)
（返回 false 应该照顾其他两个，对吗？）
Here's the html:
这是html：
<div class="tags-holder">
<input type="text" class="addField" id="addField_<%= visit.id %>" placeholder="add a new tag">
</div>
And the JS (UPDATE CLEANED UP):
和 JS（更新清理）：
$('.addField').show().keyup(function(event){
event.preventDefault();
if(event.keyCode == 13 || event.keyCode==9) {
ProfilePage.createTag( this, 'nada', 'addField')
$(this).hide().val('');
return false;
}
});
});
I left the redundant stoppers in there but really shouldn't return false simply kill the bubbling? (using Chrome).
我在那里留下了多余的塞子，但真的不应该简单地杀死冒泡就返回 false 吗？（使用铬）。
Clue? keyCode=13 is "Enter"
线索？keyCode=13 是“回车”
采纳答案by bear
Wow. Your help was great and helped me think it through.
哇。你的帮助很好，帮助我考虑清楚。
BUT the solution feels a bit like a cop-out; effective, but the condition should never be there in the first place.
但是这个解决方案感觉有点像逃避；有效，但这种情况从一开始就不应该存在。
Here it is, which I found in the comments from here: http://yuji.wordpress.com/2010/02/22/jquery-click-event-fires-twice/
这是我在此处的评论中找到的：http: //yuji.wordpress.com/2010/02/22/jquery-click-event-fires-twice/
$('.plus').unbind('click').bind('click',function(e){
console.log('clicked')
var id=$(this).attr('plus_id');
var field=$('<input type="text">').attr({'placeholder':'add a new tag','id': 'addField_' + id, 'visit_id':id});
field.focus();
field.show().keydown(function(event){
event.stopImmediatePropagation();
if(event.keyCode == 13 || event.keyCode==9) {
console.log(event)
ProfilePage.createTag( field, 'nada', 'addField')
field.hide().val('');
return false;
}
}).click(function(e){
return false;
})
;
$(this).append(field);
return false;
});
回答by Goyat Parmod
I had same issue and I used above method and it work for me.
我有同样的问题，我使用了上面的方法，它对我有用。
$(document).unbind('keypress').bind('keypress', function (e) {
// some logic here
});
回答by Ghost-Man
Try unbinding the event first then bind it, refer below code:
尝试先解除绑定事件然后绑定它，参考下面的代码：
$('.addField').show().unbind('keyup').keyup(function(event){
event.preventDefault();
if(event.keyCode == 13 || event.keyCode==9) {
ProfilePage.createTag( this, 'nada', 'addField')
$(this).hide().val('');
return false;
}
An explanation is here, i had written a post about this on my new blog.
一个解释在这里，我在我的新博客上写了一篇关于这个的文章。
回答by AmGates
Hope this will solve your problem. Instead of using event.preventDefault() use these two shown below. In case of Microsoft browsers use event.cancelBubble = true; In case of W3C model browsers use event.stopPropagation();
希望这能解决您的问题。而不是使用 event.preventDefault() 使用下面显示的这两个。在微软浏览器的情况下使用 event.cancelBubble = true; 在 W3C 模型浏览器的情况下使用 event.stopPropagation();
And Instead of Keyup event kindly use the keypress event, because during keypress itself the input will be sent to input field so whatever inputs you don't want to appear will appear on the field. So the enter button event will be triggered.
而不是 Keyup 事件，请使用 keypress 事件，因为在按键本身期间，输入将被发送到输入字段，因此您不想出现的任何输入都会出现在该字段上。所以会触发回车按钮事件。
Instead of return false use event.returnValue = false.
使用 event.returnValue = false 代替 return false。
回答by Yes Barry
Try changing all the instances of
尝试更改的所有实例
$(field).functionCall()
to
到
field.functionCall()
since field is already a jQuery object.
因为 field 已经是一个 jQuery 对象。
Ok now we've established that this wasn't the error. I tested in Firefox 7 and Chrome 15 and saw that the code block in the if statement is only fired once when enter is pressed. Try checking to make sure that something inside the createTag() function isn't doing something twice.
好的，现在我们已经确定这不是错误。我在 Firefox 7 和 Chrome 15 中进行了测试，发现 if 语句中的代码块仅在按下 Enter 时触发一次。尝试检查以确保 createTag() 函数中的某些内容没有执行两次操作。
回答by mqsoh
What do you think is catching the event when it bubbles. I only get one firing with this test page.
你认为当它冒泡时捕捉事件是什么。我只用这个测试页触发了一次。
<!DOCTYPE html>
<html>
<head>
<title>Scratch</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.setOnLoadCallback(function (){
$('input[type="text"]').keyup(function (){
console.debug('keyup');
});
});
google.load('jquery', '1.6.4');
</script>
</head>
<body>
<div class="something">
<input type="text" />
</div>
</body>
</html>
Maybe it's your selector. Is it nested inside another .addTag? When I change the jQuery selector and also make the div and input the same class I start to get two events firing. Like this:
也许这是您的选择器。它是否嵌套在另一个 .addTag 中？当我更改 jQuery 选择器并创建 div 并输入相同的类时，我开始触发两个事件。像这样：
$('.thing').show().keyup(...);
...and...
...和...
<div class="thing">
<input class="thing" type="text" />
</div>
回答by Daniel Lee
This is a problem which always drives me insane but i think this is the solution simply return false, if you return true it repeats it self randomly so im guessing it must have a listener which listens out for true responses.
这是一个总是让我发疯的问题，但我认为这是解决方案，只需返回 false，如果您返回 true，它会随机重复它自己，所以我猜它必须有一个监听器来监听真正的响应。
Short Answer Add return false;
简答添加返回假；
$("#register-form #first_name").keyup(function(event) {
console.log('hello world');
return false;
});
});
in the original question if you look at the code closely is seems the return false was written one line too early.
在最初的问题中，如果您仔细查看代码，似乎 return false 写得太早了一行。
