手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JavaScript中使用stopPropagation函数停止事件传播例子
JavaScript中使用stopPropagation函数停止事件传播例子
摘要:JS中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止事件在DOM层次中的传播。如以下例子:HTML代...

JS中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止事件在DOM层次中的传播。如以下例子:

HTML代码:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>stopPropagation()使用 - 琼台博客</title> </head> <body> <button>button</button> </body> </html> [/code] 没有加stopPropagation() [code] var button = document.getElementsByTagName('button')[0]; button.onclick=function(event){ alert('button click'); }; document.body.onclick=function(event){ alert('body click'); }

DOM逐层往上传播,所以单击button按钮也传播到了body层,于是body层的click也响应了。结果弹出两个警告框,分别是button与body。

加了stopPropagation()

var button = document.getElementsByTagName('button')[0]; button.onclick=function(event){ alert('button click'); // 停止DOM事件层次传播 event.stopPropagation(); }; document.body.onclick=function(event){ alert('body click'); }

在button的单击事件处理函数中使用了stopPropagation()停止事件传播函数,所以在弹出来自button单击事件的警告框以后就传播不到body,也就不会再次弹出body的警告框,结果只谈一次警告框。

好多童鞋在写JS的时候,往往忽视了DOM事件逐层往上传播的特性,导致程序出现异常。如果需要了解更深入的知识可以找找有关JS事件冒泡的资料看看。

【JavaScript中使用stopPropagation函数停止事件传播例子】相关文章:

JavaScript操作Cookie方法实例分析

JavaScript中string对象

在JavaScript应用中使用RequireJS来实现延迟加载

JavaScript使用addEventListener添加事件监听用法实例

JavaScript中的函数嵌套使用

JavaScript中使用Math.PI圆周率属性的方法

浅析JavaScript中的事件机制

JavaScript中的Math.SQRT1_2属性使用简介

JavaScript中strike()方法的使用介绍

JavaScript中的fontsize()方法使用介绍

精品推荐
分类导航