阻止JavaScript事件冒泡传递

1、阻止冒泡时间:

  1. //如果提供了事件对象,则这是一个非IE浏览器
  2. if ( e && e.stopPropagation )
  3.     //因此它支持W3C的stopPropagation()方法
  4.     e.stopPropagation();
  5. else
  6.     //否则,我们需要使用IE的方式来取消事件冒泡
  7.     window.event.cancelBubble = true;
  8. return false;


2.阻止浏览器的默认行为

  1. //如果提供了事件对象,则这是一个非IE浏览器
  2. if ( e && e.preventDefault ) 
  3.       //阻止默认浏览器动作(W3C)
  4.       e.preventDefault();
  5. else
  6.      //IE中阻止函数器默认动作的方式
  7.     window.event.returnValue = false;
  8. return false;

综合代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="" lang="gb2312">
  3. <head>
  4.   <title> 阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)</title>
  5.   <meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" />
  6.   <script type="text/javascript">
  7.     function doSomething (obj,evt) {
  8.       alert(obj.id);
  9.       var e=(evt)?evt:window.event;
  10.  
  11.       if (window.event){
  12.         e.cancelBubble=true;
  13.       }else{
  14.         //e.preventDefault();
  15.         e.stopPropagation();
  16.       }
  17.     }
  18.   </script>
  19. </head>
  20.  
  21. <body>
  22.       <div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
  23.             <p>This is parent1 div.</p>
  24.             <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
  25.                   <p>This is child1.</p>
  26.             </div>
  27.             <p>This is parent1 div.</p>
  28.       </div>
  29.       <br />
  30.       <div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
  31.             <p>This is parent2 div.</p>
  32.             <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
  33.                   <p>This is child2. Will bubble.</p>
  34.             </div>
  35.       <p>This is parent2 div.</p>
  36.       </div>
  37. </body>
  38. </html>





阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)


This is parent1 div.

This is child1.

This is parent1 div.

This is parent2 div.

This is child2. Will bubble.

This is parent2 div.





发表评论?

0 条评论。

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

无觅相关文章插件,快速提升流量