输入触发按键事件两次

问题描述 投票:0回答:10

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

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

(返回 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 是“Enter”

javascript jquery dom jquery-events
10个回答
11
投票

哇。你的帮助非常大,帮助我思考了这个问题。

但是这个解决方案感觉有点像是逃避现实;有效,但这种情况从一开始就不应该存在。

这是我在评论中找到的: 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;       
   });

11
投票

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

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

7
投票

尝试先解除绑定事件,然后再绑定事件,参考以下代码:

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

解释是这里,我在我的新博客上写了一篇关于此的文章。


1
投票

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

并且不要使用 Keyup 事件,而是使用 keypress 事件,因为在按键期间,输入将被发送到输入字段,因此您不想出现的任何输入都会出现在该字段上。这样就会触发回车按钮事件。

不要使用 return false,而是使用 event.returnValue = false。


0
投票

尝试更改

的所有实例
$(field).functionCall() 

field.functionCall() 

因为字段已经是一个 jQuery 对象。

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


0
投票

你认为什么是在事件冒泡时捕捉事件。我只在这个测试页上触发了一次。

<!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 和 input 成为同一类时,我开始触发两个事件。像这样:

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

...还有...

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

0
投票

这是一个总是让我发疯的问题,但我认为这是解决方案 只需返回 false,如果返回 true,它会随机重复自己,所以我猜它一定有一个侦听器来侦听真实的响应。

简答 添加返回 false;

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

});

在最初的问题中,如果仔细查看代码,似乎 return false 写得太早了一行。


0
投票

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

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

0
投票

我也经历过同样的事情,这个结构对我有用:

const onKeyPress = (e: React.KeyboardEvent): void => {
    if (onSubmit && e.key.toLowerCase() === 'enter') {
      onSubmit();

      e.stopPropagation();
      e.preventDefault();
    }
};

0
投票

Хочу поделиться своей функцией。 Оказывается вызывается дважды не keyup 和 keydown。 И с целью решения этой проблемы я создал функцию.

function keyboard(keydown, keyup) {
var mass = {};
window.addEventListener("keydown",(e) => {
    if(e.repeat) return;
    if(mass[e.code] == undefined) {
        keydown(e);
        mass[e.code] = true;
    }
});
//
window.addEventListener('keyup', (e) => {
    delete mass[e.code];
    keyup(e);
})
}
// Использование
keyboard((e) => {
console.log(e.code);
}, (e) => {
console.log(e.code);
})
© www.soinside.com 2019 - 2024. All rights reserved.