復選框點擊覆蓋表格行點擊

Question

我在HTML表格內有復選框，並且在HTML表格行上設置了onclick事件。

當我點擊表格行時，它將在我的腳本上觸發一個函數

<table>
    <tr onclick="sayHello('Hello World');">
         <td><input type="checkbox" /></td>
         <td>Column 1</td>
         <td>Column 2</td>
         <td>Column 3</td>
    </tr>
</table>

問題是，當我單擊該行內的復選框時，也會觸發該行的onclick事件

如何預防呢？

Answer 1

您可以簡單地添加復選框的onclick事件來調用event.stopPropagation()

<input type="checkbox" onclick="event.stopPropagation();" />

參考： https : //developer.mozilla.org/zh-CN/docs/Web/API/event.stopPropagation

很好閱讀的是http://javascript.info/tutorial/bubbling-and-capturing

Answer 2

您可以這樣嘗試：

http://jsfiddle.net/5jnfzy7o/

var c=document.getElementById('something')
c.addEventListener('click', function(){
event.stopPropagation(); //Stops event from bubbling up the DOM Tree
});
function sayHello(str){
  alert(str);
}

對於HTML：

<table>
<tr onclick="sayHello('Hello World');">
     <td><input type="checkbox" id="something"/></td>
     <td>Column 1</td>
     <td>Column 2</td>
     <td>Column 3</td>
</tr>
</table>

Answer 3

 var checkboxes = document.querySelectorAll("tr input"); for (var i = 0, l = checkboxes.length; i < l; i++) { checkboxes[i].onclick = function(e) { e.stopPropagation(); } } 

 <table> <tr onclick="alert('Hello World');"> <td><input type="checkbox" /></td> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </table> 

阻止事件傳播到表中：

var checkboxes = document.querySelectorAll("tr input");

for (var i = 0, l = checkboxes.length; i < l; i++) {
    checkboxes[i].onclick = function(e) {
        e.stopPropagation();
    }
}

Answer 4

您只是面對事件冒泡:)

您必須使用stopPropagation事件的方法停止傳播。 在這里查看示例。

Answer 5

您需要停止click事件的傳播。

document.querySelector('input').addEventListener('click', function(evt) {
  evt.stopPropagation()
})

您可以從有關stopPropagation的MDN文檔開始，然后閱讀事件流以了解有關此內容的更多信息。

Answer 6

 sayHello = function(whatToSay) { alert(whatToSay); } 

 <table> <tr onclick="sayHello('Hello World');"> <td><input type="checkbox" onclick="event.stopPropagation();" /></td> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </table>