首页 > 代码库 > js中事件冒泡及阻止冒泡的一小段code
js中事件冒泡及阻止冒泡的一小段code
在有些情况下, 事件冒泡会给我们的应用程序带来负面的影响。 比如下面的例子(有些极端):
<html> <head> <title></title> <script> window.onload = function(){ var all = document.getElementsByTagName('*'); for(var i = 0; i < all.length; i++){ console.log('xxx'); all[i].onmouseover = function(e){ this.style.border = '1px solid red'; } all[i].onmouseout = function(e){ this.style.border = '0px'; } } } </script> </head> <body> <b>This is the test page</b> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li> <a href=http://www.mamicode.com/'#'>Test link>
上面的代码讲的是,为鼠标悬停的当前元素加上红色的边框。 可以通过为每一个DOM元素增加mouseover和mouseout事件来时间。 如果不阻止事件冒泡, 每次把鼠标移动到一个元素上时, 该元素都会有红色的边框。这并不是我们的预期结果。 效果如下:
那如何解决这类问题呢, 。。。 额, 在这种情况下,当然得阻止时间的冒泡。 那如何阻止? 且看下面的code:
function stopBubble(e){ if(e && e.stopPropagation){ e.stopPropagation() }else{ window.event.cancleBubble = true; } }每次绑定事件调用上面的函数就可以阻止事件冒泡,从而得到预期的效果。 完整code如下:<html> <head> <title></title> <script> window.onload = function(){ var all = document.getElementsByTagName('*'); for(var i = 0; i < all.length; i++){ console.log('xxx'); all[i].onmouseover = function(e){ this.style.border = '1px solid red'; stopBubble(e); } all[i].onmouseout = function(e){ this.style.border = '0px'; stopBubble(e); } } } function stopBubble(e){ if(e && e.stopPropagation){ e.stopPropagation() }else{ window.event.cancleBubble = true; } } </script> </head> <body> <b>This is the test page</b> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li> <a href=http://www.mamicode.com/'#'>Test link>效果图如下:
js中事件冒泡及阻止冒泡的一小段code
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。