火災的輸入按鍵事件兩次

這個問題已經被問/回答（大部分）之前，但我已經試過三件事冒泡停止事件，但沒有奏效：火災的輸入按鍵事件兩次

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（UPDATE清理）：

$('.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）。

線索？鍵代碼= 13是「輸入」

來源

2011-11-02 bear

爲什麼你要做'$（field）.functionCall（）'而不是'field.functionCall（）'？ –

我創建了[jsFiddle]（http://jsfiddle.net/thomas_peklak/dNKZ7/3/）代碼，但沒有看到任何問題 - 您嘗試阻止的行爲是什麼？ – topek

謝謝。這樣可行;也許這是事件冒泡的東西給DOM（我沒有發佈整個頁面）。問題是，它會觸發createTag（）函數兩次，這是有問題:) – bear

哇。你的幫助很棒，幫助我思考。

但是這個解決方案有點像cop-out;有效的，但條件不應該在那裏擺在首位。

這是，這是我在從這裏找到註釋： 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;  
    });

來源

2011-11-03 19:56:31 bear

哦，這很奇怪。現在呢？如果是這樣，那太棒了！但是根據你發佈的文章，這聽起來像是有超過$（document）.ready（）函數的問題。這是什麼情況？ –

順便說一下，我正在閱讀更多關於它似乎這是設置keyup事件處理程序的一個特定問題。*顯然*推薦使用_keypress_處理程序.. http://stackoverflow.com/questions/2387316/jquery-textbox-keyup-firing-twice –

我會檢查出@mmmshuddup，但我認爲這個問題是非常具體的項目;事實證明，頁面上的所有內容都會觸發額外事件 – bear

嘗試改變的

$(field).functionCall()

所有實例

field.functionCall()

因爲場已經是一個jQuery對象。

好吧，現在我們已經確定這不是錯誤。我在Firefox 7和Chrome 15中進行了測試，發現if語句中的代碼塊在按下Enter鍵時僅觸發一次。嘗試檢查以確保createTag（）函數內部的某些內容不會執行兩次任務。

來源

2011-11-02 21:23:40

壞習慣... jquery忽略它，但我已經做出了改變，但沒有任何改善。 – bear

Dangit。是的，無論如何，無論如何，無論如何，這都是黑暗中的一擊。嗯，讓我想一下這個片刻。 –

@ user508708我在topek創建的同一個jsFiddle中爲createTag（）做了一個模擬函數。警報只會被觸發一次..在這一點上，如果不知道DOM中究竟有什麼內容以及ProfilePage對象的引用是非常困難的。 –

您認爲在氣泡出現時捕捉事件的意義如何？我只用這個測試頁面發射一次。

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

來源

2011-11-02 22:13:10 mqsoh

希望這將解決您的問題。而不是使用event.preventDefault（）使用下面顯示的這兩個。在Microsoft瀏覽器中使用 event.cancelBubble = true; 如果W3C模型瀏覽器使用事件。stopPropagation（）;

而不是Keyup事件善意地使用按鍵事件，因爲在按鍵本身輸入將被髮送到輸入字段，所以你不想出現的任何輸入將出現在字段上。所以輸入按鈕事件將被觸發。

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

來源

2011-11-04 07:27:04 AmGates

嘗試解除綁定事件首先把它綁定，請參考下面的代碼：

$('.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，我寫了一個關於這個職位上我的新博客。

來源

2011-11-05 07:45:30

這是一個總是讓我瘋狂的問題，但我認爲這是解決方案只是返回false，如果你返回true，它會隨機地重複它自己，所以即時猜測它必須有一個偵聽器，偵聽真正的響應。

簡答添加返回false;

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

}）;

在原始問題中，如果仔細觀察代碼，看起來返回false被寫得太早了。

來源

2013-06-07 20:42:28

我有同樣的問題，我用上面的方法，它爲我工作。

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

來源

2015-11-03 19:24:47

火災的輸入按鍵事件兩次

回答

相關問題