阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）

本文介绍了如何在JavaScript中通过使用`event.cancelBubble`和`event.stopPropagation()`来阻止事件冒泡传递，确保仅触发目标元素的事件处理函数，而不会影响其父元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假如有如下要求，一个表格中，每一行都加了click事件，每一行第一个单元格有一个checkbox，当点击checkbox选中时，不要触发行级<TR>的click事件，这要怎么做呢？

默认情况下，由于Javascript的事件冒泡传递机制，当单击<TR>内部的<TD>时，<TR>也会被感染到click事件，为了阻止这种传播Propagation特性，可以event.cancelBubble = true，这样就不会继续向上传递了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
<head>
<title> 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）   </title>
<meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
<script type="text/javascript">
function doSomething (e) {
e.preventDefault();
//e.stopPropagation();
}
</script>
</head>
<body>
<table>
<tr style="background:red" onclick="alert('click the tr')">
<td><input type="checkbox" name="checkbox" value="checkbox" onclick="javascript:event.cancelBubble = true;"> </td>
<td>td content</td>
</tr>
</table>
</body>
</html>