复选框单击覆盖表行单击

Checkbox click overriding table row click

本文关键字：单击 覆盖 复选框      更新时间：2023-10-09

我在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事件

如何防止这种情况发生？

您可以简单地添加复选框的onclick事件来调用event.stopPropagation()

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

参考编号：https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

读起来不错http://javascript.info/tutorial/bubbling-and-capturing

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();
    }
}

您可以这样尝试：

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>

您刚刚面临事件冒泡：）

您必须使用stopPropagation事件的方法来停止传播。请参阅此处的示例。

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

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

您可以从有关stopPropagation的MDN文档开始，并阅读事件流以了解更多信息。

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>

相关文章：