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/en-US/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

＆＃13;

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

＆＃13;

<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>

＆＃13;

阻止事件传播到表：

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事件的方法停止传播。查看示例here。

Answer 5

您需要停止点击事件的传播。

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>

复选框单击覆盖表行单击

6 个答案: