JavaScript 阻止事件冒泡传递

最新推荐文章于 2025-06-14 21:18:41 发布

原创最新推荐文章于 2025-06-14 21:18:41 发布 · 2.9w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #button #html #function #div #border

JavaScript 专栏收录该内容

65 篇文章

订阅专栏

关键词：

1、cancelBubble（HTML DOM Event 对象属性）：如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。

2、stopPropagation（HTML DOM Event 对象方法）：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

3、 preventDefault（HTML DOM Event 对象方法）通知浏览器不要执行与事件关联的默认动作。

好了，测试代码如下：

<!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"> <head> <title> JavaScript阻止时间冒泡传递测试 </title> <meta name="author" content="http://blog.youkuaiyun.com/xxd851116" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> div {padding:10px; border:1px solid #EEE;margin:10px;} </style> </head> <body onclick="alert('Body Click');"> 这是顶层Body <div onclick="alert('Div 1 Click');"> 这是第1层 <div onclick="alert('Div 2A Click');">这是第2层A <input type="button" onclick="alert('Button Click');stopBubble(event)" value="点击测试时间冒泡(阻止)！" /> </div> <div onclick="alert('Div 2B Click');">这是第2层B <input type="button" onclick="alert('Button Click');" value="点击测试时间冒泡(未阻止)！" /> </div> </div> <mce:script type="text/javascript"></mce:script> </body> </html>