JavaScript 阻止事件冒泡传递

现在的位置: 首页 > 综合 > 正文

RSS

JavaScript 阻止事件冒泡传递

2013年10月06日 ⁄ 综合 ⁄ 共 1525字 ⁄ 字号小中大 ⁄ 评论关闭

关键词：

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.csdn.net/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>

【上篇】山寨一个PetShop(Task100)——注册界面（配置CreateUserWizard）
【下篇】如何给 NPM 设置代理

作者: increment

该日志由 increment 于11年前发表在综合分类下，最后更新于 2013年10月06日.
转载请注明: JavaScript 阻止事件冒泡传递 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

JavaScript 阻止事件冒泡传递

作者: increment

书签

最新文章New

本站推荐

返回首页