jQuery點擊觸發兩次，但只註冊一次

我有一個元素點擊事件，點擊一次點擊兩次，這是一個常見的搜索問題，但我排除了其他答案的潛在原因。該代碼是jQuery點擊觸發兩次，但只註冊一次

console.log("registering label click"); 
$("label.tiletype").click(
    function(event) { 
    event.stopPropagation(); // stop the .tile click being called 
    console.log("label clicked, x = " + event.pageX + ", y = " + event.pageY); 
    // more code... 
    } 
}

當頁面加載和「label.tiletype」點擊，日誌

registering label click 
label clicked, x = 679, y = 172 
label clicked, x = 679, y = 172

由於「註冊標籤上單擊」只會發生一次，它不能是由於任何原因點擊被綁定兩次。

由於pageX和pageY座標是相同的，雙重事件發生在相同的物理點擊，而不是在元素上調用的第二個程序化點擊（）（我認爲，如果錯誤的話糾正我）。

調試行只在這個特定位的代碼中，所以沒有其他點擊事件觸發。

我已經檢查了Firebug中的源代碼，並且有多個「label.tiletype」元素但屏幕上沒有重疊，它們都是display：block和float：left。

JavaScript文件中還有其他的東西發生（行375 https://github.com/okohll/agileBase/blob/200dd1c6c1a8968bc9d8f5b2b3d9188ac4776984/gtpb_clientside/resources/simple/simple.js），但無論發生什麼，上述語句必須始終在邏輯上是真實的。

這在Firefox和Safari中都會發生。

我錯過了什麼？

的jsfiddle：http://jsfiddle.net/okohll/cKgAp/

來源

2013-03-30 Oliver Kohll

你能得到[小提琴]（http://jsfiddle.net）請？ – yckart

http：// jsfiddle。淨/ okohll/cKgAp/ –

你的代碼有語法錯誤的話，它應是

console.log("registering label click"); 
$("label.tiletype").click(function(event) { 
    event.stopPropagation(); // stop the .tile click being called 
    console.log("label clicked, x = " + event.pageX + ", y = " + event.pageY); 
    // more code... 
});

但這個代碼按預期工作（只有一個「標籤點擊」消息觸發）。因此，您應該檢查其他代碼或HTML代碼的有效性（例如，未封閉的標籤可能導致此行爲）。

來源

2013-03-30 23:10:48 Richard

啊謝謝，失蹤）是我的複製錯誤，而不是原來的代碼。儘管如此，我會查找未封閉的標籤和其他語法錯誤。我剛剛做了一個jsfiddle，我將編輯該問題添加。 –

根據this site雙重使用$(document).ready可能是原因。嘗試通過首先解除您的功能來避免它：

$('label.tiletype').unbind('click').bind('click', 
function(event) { 
    event.stopPropagation(); // stop the .tile click being called 
    console.log('label clicked, x = ' + event.pageX + ', y = ' + event.pageY); 
    // more code... 
}

來源

2013-03-30 23:10:52 danielwinter

謝謝，我沒有成功嘗試過。如果它是一個雙重綁定（沒有雙關語意圖），那麼「註冊點擊事件」不會記錄兩次 –

有趣的是：如果我點擊你的小提琴中的單選按鈕，我只會得到1個警報，如果我點擊文本，我得到兩個。也許這可能會導致一些解決方案。 – danielwinter

是的，我同時發現，點擊輸入作爲第二個事件冒泡 - 看到我剛剛添加的答案。謝謝。 –

啊，發現它！標籤有一個輸入封裝在裏面，其中一個事件是由於點擊傳播了。

添加

$("label.tiletype input").click(function(event) { 
    event.stopPropagation(); 
});

到http://jsfiddle.net/okohll/cKgAp/

修復它。感謝提示做一個jsfiddle，我最初認爲我不能複製它。

來源

2013-03-30 23:31:17

的提琴手中獲得了兩個事件stopPropagation可能會中止事件委託（您的其他代碼或其他模塊可能無法工作）。更好的解決方案是修復HTML結構，例如像這樣：http://jsfiddle.net/richard03/cKgAp/3/ – Richard

您可以使用on()

$("label.tiletype").on('click', function (event) { 
    alert("label clicked, x = " + event.pageX + ", y = " + event.pageY); 
});

http://jsfiddle.net/cKgAp/6/

來源

2013-03-30 23:57:50

jQuery點擊觸發兩次，但只註冊一次

回答

相關問題