输入猛击事件两次

时间:2011-11-02 21:18:39

标签: javascript jquery dom javascript-events

此问题之前已被提及/回答(大多数情况下),但我尝试了三件事来阻止事件冒泡但没有任何效果:

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

});

我把多余的塞子留在那里,但真的不应该返回假只是杀死冒泡? (使用Chrome)。

线索? keyCode = 13是“Enter”

8 个答案:

答案 0 :(得分: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;       
   });

答案 1 :(得分:8)

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

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

答案 2 :(得分:6)

首先尝试解除绑定事件然后绑定它,请参阅下面的代码:

$('.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,我在我的新博客上发了一篇关于此事的帖子。

答案 3 :(得分:1)

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

而不是Keyup事件请使用按键事件,因为在按键期间,输入将被发送到输入字段,因此您不希望出现的任何输入将出现在字段上。因此将触发输入按钮事件。

而不是返回false使用event.returnValue = false。

答案 4 :(得分:0)

尝试更改

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

field.functionCall() 

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

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

答案 5 :(得分: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和输入相同的类时,我开始得到两个事件触发。像这样:

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

...和...

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

答案 6 :(得分:0)

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

简答 添加return false;

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

});

在原始问题中,如果仔细查看代码,似乎返回false太早写了一行。

答案 7 :(得分:0)

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

ValueError: Expected 2D array, got 1D array instead:
array=[337.   118.     4.     4.5    9.65].
Reshape your data either using array.reshape(-1, 1) if your data has a single feature or 
array.reshape(1, -1) if it contains a single sample.