Js 事件冒泡

最新推荐文章于 2025-08-12 11:36:58 发布

最新推荐文章于 2025-08-12 11:36:58 发布 · 84 阅读

文章标签：

#IE #HTML #数据结构

本文详细解析了HTML中事件冒泡的概念，并通过实例演示如何阻止事件冒泡，重点介绍了这一机制在表单验证等场景中的应用。

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

定义
Html是层次结构的，内层的事件能够被传播的外层我们称之为事件冒泡

例子

<div onclick="testClick(event);">
	<table border="1">
		<tr>
			<td>this a td element</td>
			<td id="output">nothing</td>
		</tr>
	</table>
</div>

当鼠标点击<td>this a td element</td>元素时，会触发testClick事件，即事件冒泡到div元素

取消冒泡事件
还是上面的代码，我想让事件传播的table元素就结束，不再向外层传播怎么办捏？
添加return false；
<table border="1" οnclick=’return false;’>
这样当点击table内的元素时，div 的onclick事件不会被触发
[color=red]取消冒泡最常用的场景是表单验证，验证失败后数据不应该被提交的服务器[/color]