事件發射兩次

Question

嗨我綁定onclick事件給父母以及孩子（同樣的方法）。事件被炒了兩次如何避免這種情況？

<div id="sparentId" onclick="javascript:somemethod()" > 
    <button id="childId" onclick="javascript:somemethod()"></button> 
</div> 

點擊事件被觸發兩次。

Answer 1

之所以onclick事件正顯示出兩次，是因爲有一些所謂的事件在JavaScript冒泡。

看看以下內容：

此圖片顯示，如果<img>被點擊，該事件將「泡沫」到<p>標籤，然後到<div>，然後文件的其餘部分。如果在<p>標記上發生了onclick事件，並且即使沒有單擊<p>標記（但<img>爲），該事件也必然會「向上」起泡，並且在發生事件時仍會繼續在<p>標籤（換句話說，如果你也對<div>的onclick事件，那麼這將火和

那麼你應該做的是這樣的：

<div id="sparentId" onclick="javascript:somemethod()" > 
    <button id="childId"></button> 
</div> 

換句話說，正如我上面所解釋的那樣，您不再需要按鈕中額外的onclick事件處理程序，因爲當您點擊按鈕時，事件會冒泡到paren t div，它會觸發該事件。

如果你想使用原來的HTML代碼，這很好，以及 - 只補充一點：

function somemethod(evt) { // the method you run 
    // some code 
    evt.stopPropagation(); // stops bubbling 
} 

這有效地冒泡的DOM樹停止活動。

Answer 2

嘗試：

<button id="childId" onclick="javascript:somemethod(event)"></button> 

JS代碼

function somemethod(event){ 
    event.stopPropagation(); 
} 

Answer 3

use 

event.stopImmediatePropagation() 

Answer 4

它被調用兩次，因爲你調用它兩次，即一次在div點擊和一次在按鈕點擊。該按鈕已經在div內。

<div id="sparentId" onclick="javascript:somemethod()" > 
    <button id="childId" onclick="javascript:somemethod()"></button> 
</div> 

嘗試

<div id="sparentId"> 
    <button id="childId" onclick="javascript:somemethod()">Click Me</button> 
</div>