阻止冒泡： 
  冒泡简单的举例来说，儿子知道了一个秘密消息，它告诉了爸爸，爸爸知道了又告诉了爷爷，一级级传递从而以引起事件的混乱，而阻止冒泡就是不让儿子告诉爸爸，爸爸自然不会告诉爷爷。下面的demo 就是很好的例子
  1. <!DOCTYPE html>
  2. <html> 
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style type="text/css">
  8.       #box {
  9.         width: 300px;
  10.         height: 300px;
  11.         background: red;
  12.         display: none;
  13.       }
  14.     </style>
  15.     <script type="text/javascript">
  16.       window.onload = function() {
  17.           var btn = document.getElementById('btn');
  18.           var box = document.getElementById('box');
  19.           btn.onclick = function(ev) {
  20.             var oEvent = ev || event;
  21.             box.style.display = 'block';
  22.             //oEvent.cancelBubble = true;//高版本浏览器
  23.             stopBubble(oEvent);
  24.             //在低版本的chrome和firefox浏览器中需要兼容性处理
  25.             //高版本chrome和firefox浏览器直接使用上面这行代码即可
  26.           }
  27.           document.onclick = function() {
  28.             box.style.display = 'none';
  29.           } 
  31.         }
  32.         //阻止冒泡事件的兼容性处理
  33.       function stopBubble(e) {
  34.         if(e && e.stopPropagation) { //非IE
  35.           e.stopPropagation();
  36.         } else { //IE
  37.           window.event.cancelBubble = true;
  38.         }
  39.       }
  40.     </script>
  41.   </head> 
  43.   <body>
  44.     <input type="button" id="btn" value="语言" />
  45.     <div id="box"></div>
  46.   </body> 
  48. </html>
x
48
  1.   
 
1
  1. <!DOCTYPE html>
2
  1. <html>
3
  1.   
4
  1.   <head>
5
  1.     <meta charset="UTF-8">
6
  1.     <title></title>
7
  1.     <style type="text/css">
8
  1.       #box {
9
  1.         width: 300px;
10
  1.         height: 300px;
11
  1.         background: red;
12
  1.         display: none;
13
  1.       }
14
  1.     </style>
15
  1.     <script type="text/javascript">
16
  1.       window.onload = function() {
17
  1.           var btn = document.getElementById('btn');
18
  1.           var box = document.getElementById('box');
19
  1.           btn.onclick = function(ev) {
20
  1.             var oEvent = ev || event;
21
  1.             box.style.display = 'block';
22
  1.             //oEvent.cancelBubble = true;//高版本浏览器
23
  1.             stopBubble(oEvent);
24
  1.             //在低版本的chrome和firefox浏览器中需要兼容性处理
25
  1.             //高版本chrome和firefox浏览器直接使用上面这行代码即可
26
  1.           }
27
  1.           document.onclick = function() {
28
  1.             box.style.display = 'none';
29
  1.           }
30
  1.   
31
  1.         }
32
  1.         //阻止冒泡事件的兼容性处理
33
  1.       function stopBubble(e) {
34
  1.         if(e && e.stopPropagation) { //非IE
35
  1.           e.stopPropagation();
36
  1.         } else { //IE
37
  1.           window.event.cancelBubble = true;
38
  1.         }
39
  1.       }
40
  1.     </script>
41
  1.   </head>
42
  1.   
43
  1.   <body>
44
  1.     <input type="button" id="btn" value="语言" />
45
  1.     <div id="box"></div>
46
  1.   </body>
47
  1.   
48
  1. </html>
我所实现的效果是：点击按钮btn让box显示，而点击其他地方则让box消失。
如果我不阻止冒泡的话，那么首先btn会触发点击时间，让盒子显示，但是由于box是包含在document中的，所以会向上冒泡又触发document的点击事件，盒子又消失。这个事件的执行顺序可以在不同的点击事件中使用alert来验证。关于cancelBubble的兼容性处理在高版本的chrome和firefox中已经不需要兼容处理了，直接使用oEvent.cancelBubble = true 即可。下面的阻止浏览器事件的兼容性处理在高版本浏览器中同样不需要。

默认事件。即浏览器本身具备的功能。
  1. function preventDefa(e){
  2.   if(window.event){
  3.     //IE中阻止函数器默认动作的方式
  4.     window.event.returnValue = false;
  5.   }
  6.   else{
  7.     //阻止默认浏览器动作(W3C)
  8.     e.preventDefault();
  9.   }
  10. }
1
10
 
1
  1. function preventDefa(e){
2
  1.   if(window.event){
3
  1.     //IE中阻止函数器默认动作的方式  
4
  1.     window.event.returnValue = false;  
5
  1.   }
6
  1.   else{
7
  1.     //阻止默认浏览器动作(W3C)  
8
  1.     e.preventDefault();
9
  1.   }  
10
  1. }
这种是兼容性写法，但是如果你只需要支持高版本浏览器的话，那么如上文一样，一句话即可。
  1. btn.onclick = function (){
  2.   return false;
  3. }
1
 
1
  1. btn.onclick = function (){
2
  1.   return false;
3
  1. }

javascript如何阻止事件冒泡和默认行为的更多相关文章

  1. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

  2. javascript里阻止事件冒泡

    如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了. IE里阻止冒泡事件使用cancelBubble属性 ...

  3. js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

    preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...

  4. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

  5. vue阻止事件冒泡和默认事件

    本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...

  6. 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  7. javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...

  8. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  9. 原生javascript实现阻止浏览器默认行为与阻止事件冒泡

    不同的浏览器之间存在兼容问题,在IE与标准浏览器之间存在很大的差异,所以在实现阻止浏览器默认行为和阻止事件冒泡就要考虑要它们之间的不同 /** * 取消冒泡 * @param {事件} e */ fu ...

随机推荐

  1. Kafka学习整理五(Consumer配置)

    Property Default Description group.id   用来唯一标识consumer进程所在组的字符串,如果设置同样的group id,表示这些processes都是属于同一个 ...

  2. Gcc And MakeFile Level1

    简单介绍gcc And make 的使用 基本编译 gcc a.c b.c -o exeName 分步编译 gcc -c a.c -o a.o gcc a.o b.c -o main.o 使用Make ...

  3. 对于一个web工程，如果我们复制一个已有的工程粘贴到同一个workspace下，我们除了需要更改工程的名字还需要更改这个新工程的content root，否则会报错。

    对于一个web工程,如果我们复制一个已有的工程粘贴到同一个workspace下,我们除了需要更改工程的名字还需要更改这个新工程的content root,否则会报错.步骤如下: 右键新的工程---&g ...

  4. POP邮件收取邮件 代码

    // 111111.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <WinSock.h> #include ...

  5. Shell 常用命令总结

      Shell常用命令总结 1  ls命令:列出文件 ls -la 列出当前目录下的所有文件和文件夹 ls a* 列出当前目录下所有以a字母开头的文件 ls -l *.txt 列出当前目录下所有后缀名 ...

  6. Hdu1560 DNA sequence（IDA*） 2017-01-20 18:53 50人阅读 评论(0) 收藏

    DNA sequence Time Limit : 15000/5000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total ...

  7. （1）-使用json所要用到的jar包下载

    json是个非常重要的数据结构,在web开发中应用十分广泛.我觉得每个人都应该好好的去研究一下json的底层实现,需要准备下面的六个jar包:commons-lang-1.0.4.jar common ...

  8. python signal

    在了解了Linux的信号基础之 后,Python标准库中的signal包就很容易学习和理解.signal包负责在Python程序内部处理信号,典型的操作包括预设信号处理函数,暂 停并等待信号,以及定时 ...

  9. Replication--备份初始化需要还原备份么？

    测试场景:发布服务器:SQLVM6\SQL2订阅服务器:SQLVM5\SQL2分发服务器:SQLVM3\SQL2发布数据库:RepDB2订阅数据库:RepDB2发布:RepDB2_TB1 测试步骤:1 ...

  10. C# skip 重试执行代码段

    var retryTimes = 5; //重试次数 int times = 0;  skip:              //代码段开始 //处理逻辑 var result=false ;   // ...