Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1145375
  • 博文数量: 103
  • 博客积分: 1897
  • 博客等级: 上尉
  • 技术积分: 1717
  • 用 户 组: 普通用户
  • 注册时间: 2012-04-19 21:02
文章分类

全部博文(103)

文章存档

2013年(19)

2012年(84)

分类: JavaScript

2013-06-27 01:22:25

js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数。
如下例所示:

点击(此处)折叠或打开

  1. <html>
  2. <head>

  3. </head>

  4. <body>
  5. <div id ='outer' onclick="alert('外层')">
  6. 外层
  7.     <div id ='mid' onclick="alert('中间')">
  8.     中间
  9.     <div id ='inner' onclick="alert('里层')">
  10.     里层
  11.     <div>
  12.     </div>


  13. </div>


  14. </body>
  15. </html>

当你点击里层的时候,会依次弹出‘里层’,‘中间’和‘外层’。这就是事件冒泡。
从直观上来看,也是这样的,因为最里层的区域是在父级节点中的,点击了子级节点的区域,其实也是点击了父级节点的区域,所以事件会传播起来。
其实,很多的时候,我们并不想事件冒泡,因为这样会同时触发几个事件。阻止事件冒泡的方法如下所示。

点击(此处)折叠或打开

  1. <html>
  2. <head>

  3. </head>

  4. <body>
  5. <div id ='outer' onclick="alert('外层')">
  6. 外层
  7.     <div id ='mid' onclick="alert('中间')">
  8.     中间
  9.     <a id ='inner' href=''>
  10.     里层
  11.     </a>
  12.     </div>


  13. </div>
  14. <script>
  15. document.getElementById('inner').onclick=function(e){
  16. alert('里层');
  17. stopBubble(e)
  18. }

  19. //阻止冒泡时间方法,兼容ie(e.cancleBubble)和ff(e.stopProgation)
  20. function stopBubble(e){

  21.         var evt = e||window.event;
  22.     evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡
  23.     evt.preventDefault();//阻止浏览器默认行为,这样链接就不会跳转
  24. }



  25. </script>
  26. </body>
  27. </html>




阅读(6058) | 评论(0) | 转发(0) |
0

上一篇:matplotlib学习(—)

下一篇:没有了

给主人留下些什么吧!~~