Javascript onclick（）事件冒泡 - 工作與否？

我有一個表格，其中的表格行標記是用onclick（）處理程序裝飾的。如果該行在任何地方被點擊，它將加載另一個頁面。在該行的其中一個元素上，是一個錨標籤，它也會導致另一個頁面。Javascript onclick（）事件冒泡 - 工作與否？

想要的的行爲是，如果他們點擊鏈接，就會加載「delete.html」。如果他們點擊該行的其他地方，則會加載「edit.html」。

問題有時（根據用戶）鏈接和onclick（）都立即被觸發，導致後端代碼出現問題。他們發誓，他們不是雙擊。

我不太瞭解JavaScript事件冒泡，處理和任何事情，甚至不知道從哪裏開始這個奇怪的問題，所以我尋求幫助。以下是渲染頁面的一個片段，顯示了帶有嵌入式鏈接和相關腳本標記的行。歡迎任何建議：

<tr id="tableRow_3339_0" class="odd"> 
    <td class="l"></td> 
    <td>PENDING</td> 
    <td>Yabba Dabba Doo</td> 
    <td>Fred Flintstone</td> 
    <td> 
    <a href="/delete.html?requestId=3339"> 
     <div class="deleteButtonIcon"></div> 
    </a> 
    </td> 
    <td class="r"></td> 
</tr> 
<script type="text/javascript">document.getElementById("tableRow_3339_0").onclick = function(event) { window.location = '//edit.html?requestId=3339'; };</script>

來源

2012-11-27 user1071914

事件冒泡這樣的工作。如果元素A包含在元素B中，並且元素A被單擊，則單擊事件觸發元素A，然後它會冒泡併爲元素B激發。這是因爲技術上您要單擊這兩個元素。

所以基本上，如果他們點擊鏈接，點擊事件會冒泡到tr元素。根據鏈接點擊加載下一頁的速度，可能會發生tr click事件。

可以停止事件處理程序中冒泡：How to stop event propagation with inline onclick attribute?

來源

2012-11-27 23:06:06 dqhendricks

完美的答案和清晰的解釋。謝謝！ – user1071914

有3點主要的處理JavaScript事件的方式：

事件處理程序
事件監聽器
事件代表團

事件處理程序就像一樣3210直接放入HTML中。事件監聽器使用名爲addEventListener的方法將列表附加到元素，並讓瀏覽器監聽事件。事件代表團（涉及冒泡），根據你的問題，並允許我們聽父母元素髮生在他們的孩子身上的事件。

你基本上是想在這裏混合＃1和＃3。你可以使用任何三個，但你實際上可能與2號更輕鬆地：

嘗試是這樣的：

rows = document.getElementsByTagName("tr"); 
rows.('click', function(event) { 
window.location = '//edit.html?requestId=3339'; 
};

這個職位上JavaScript Events將覆蓋更多關於這個，如果你需要到更好地理解3種方式。（免責聲明：我寫了）。

來源

2016-03-24 18:35:19

Javascript onclick（）事件冒泡 - 工作與否？

回答

相關問題