输入触发按键事件两次答案

【问题标题】：Input Fires Keypress Event Twice输入触发按键事件两次
【发布时间】：2011-12-20 17:00:23
【问题描述】：

这个问题之前已经（大部分）被问过/回答过，但是我尝试了三件事来阻止事件冒泡，但没有任何效果：

return false;
e.stopPropagation();
e.preventDefault();

（return false 应该照顾其他两个，对吗？）

这是html：

<div class="tags-holder">
    <input type="text" class="addField" id="addField_<%= visit.id %>"  placeholder="add a new tag">
</div>

还有 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;       
   }

});

我把多余的塞子留在了那里，但真的不应该返回 false 简单地杀死冒泡吗？（使用 Chrome）。

线索？ keyCode=13 是“回车”

【问题讨论】：

你为什么用$(field).functionCall()而不是field.functionCall()？
我为您的代码创建了一个jsFiddle，但没有发现任何问题 - 您试图阻止的行为是什么？
谢谢。这样可行;考虑到 DOM，这可能与事件冒泡有关（我没有发布整个页面）。问题是它会触发 createTag() 函数两次，这是有问题的 :)
@mmmshuddup 我现在清理了——感谢您的意见。
你打赌！是的，我也尝试过使用 jsFiddle，它对我来说很好用！哪些浏览器有问题？

标签： javascript jquery dom jquery-events

【解决方案1】：

哇。你的帮助很棒，帮助我想通了。

但解决方案感觉有点像逃避现实；有效，但首先不应该出现这种情况。

在这里，我从这里的 cmets 中找到了它： 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;       
   });

【讨论】：

哦，很奇怪。所以它现在对你有用吗？如果是这样，那就太好了！但是根据您发布的那篇文章，听起来问题不仅仅是 $(document).ready() 功能。那是怎么回事？
顺便说一下，我正在阅读有关它的更多信息，看来这是设置 keyup 事件处理程序的特定问题。显然建议使用 keypress 处理程序。stackoverflow.com/questions/2387316/…
我会检查一下@mmmshuddup，但我认为这个问题非常具体到项目；事实证明页面上的所有内容都在触发额外的事件。
所以@mmmshuddup，我在这里发布的内容有效。但事实证明，这是另一个功能中的一个问题，它正在引入额外的内容。取消绑定事件是有效的，但如果更好地实施恕我直言，这也是不必要的。感谢您的帮助！
对我来说，event.stopImmediatePropagation(); 是让 jQuery 停止两次调用处理程序的关键。

【解决方案2】：

我有同样的问题，我使用了上述方法，它对我有用。

$(document).unbind('keypress').bind('keypress', function (e) {
   // some logic here
});

【讨论】：

【解决方案3】：

先解绑事件再绑定，参考以下代码：

$('.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;       
}

解释是here，我在我的新博客上写了一篇关于这个的帖子。

【讨论】：

博文链接失效

【解决方案4】：

希望这能解决您的问题。而不是使用 event.preventDefault() 使用下面显示的这两个。如果是 Microsoft 浏览器，请使用 event.cancelBubble = true; 如果是 W3C 模型浏览器，请使用 event.stopPropagation();

请不要使用 Keyup 事件，而是使用 keypress 事件，因为在按键本身期间，输入将被发送到输入字段，因此您不想出现的任何输入都会出现在该字段上。所以会触发回车按钮事件。

使用 event.returnValue = false 代替 return false。

【讨论】：

【解决方案5】：

尝试更改

的所有实例

$(field).functionCall()

到

field.functionCall()

因为 field 已经是一个 jQuery 对象了。

好的，现在我们已经确定这不是错误。我在 Firefox 7 和 Chrome 15 中进行了测试，发现 if 语句中的代码块仅在按下 enter 时触发一次。尝试检查以确保 createTag() 函数中的某些内容没有执行两次。

【讨论】：

坏习惯...jquery忽略了它，但我已经做出了改变，但没有任何改善。
丹吉特。是的，无论如何，这是一个在黑暗中拍摄的镜头。嗯，让我考虑一下。
@user508708 我在 topek 创建的同一个 jsFiddle 中为 createTag() 创建了一个模拟函数。警报只触发一次。在这一点上，如果不知道 DOM 中的确切内容以及 ProfilePage 对象引用的内容，就很难确定。
我认为你是对的。该页面非常动态，可能无法完整发布。我将开始缩小范围，看看是否可以隔离问题。不过，令我惊讶的是，我们不能仅仅杀死冒泡......哦，还有一条线索：我在 $(document).ready(function() 中初始化它

【解决方案6】：

当它冒泡时，你认为什么是捕捉事件。这个测试页我只得到了一次触发。

<!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>

也许是你的选择器。它是否嵌套在另一个 .addTag 中？当我更改 jQuery 选择器并制作 div 并输入相同的类时，我开始触发两个事件。像这样：

$('.thing').show().keyup(...);

...和...

<div class="thing">
    <input class="thing" type="text" />
</div>

【讨论】：

【解决方案7】：

这是一个总是让我发疯的问题，但我认为这是解决方案简单地返回false，如果你返回true，它会随机重复它，所以我猜它必须有一个监听器来监听真实的响应。

简答添加return false;

$("#register-form #first_name").keyup(function(event) {
console.log('hello world');
return false;

});

如果您仔细查看代码，原始问题中的 return false 似乎写得太早了一行。

【讨论】：

【解决方案8】：

我在使用 Angular 11 EventEmitters 时遇到了这个问题。我通过创建我的事件发射器的新实例来解决它事件被触发。

@Output() keypress = new EventEmitter();
onKeyPress(event) {
   this.keypress = new EventEmitter();
   this.keypress.emit(event);
 }

【讨论】：