阻止冒泡： 
  冒泡简单的举例来说，儿子知道了一个秘密消息，它告诉了爸爸，爸爸知道了又告诉了爷爷，一级级传递从而以引起事件的混乱，而阻止冒泡就是不让儿子告诉爸爸，爸爸自然不会告诉爷爷。下面的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. 解压*.tar.bz2的坑

    下了一个压缩包,tar -xf 解压不了 解决办法: 装了bzip2工具 bzip2 -d **.tar.bz2 //将文件解压成**.tar tar -xf **.tar //解包 听说可以 tar ...

  2. 《OpenGL超级宝典》编程环境配置

    最近在接触OpenGL,使用的书籍就是那本<OpenGL超级宝典>,不过编程环境的搭建和设置还是比较麻烦的,在网上找了很多资料,找不到GLTools.lib这个库.没办法自己就借助源码自己 ...

  3. oracle RAC 创库，停启库，删除库

    1.创建数据库的命令dbca -silent -createDatabase -templateName General_Purpose.dbc -gdbname FPCSDB2 -sid FPCSD ...

  4. 以json格式打印实体类信息

    1.pom.xml <dependency> <groupId>com.google.code.gson</groupId> <artifactId>g ...

  5. Redis数据结构（五）

    存储set (1)和List类型不同的是,Set集合中不允许出现重复的元素 (2)set可包含的最大元素数量是4294967295 存储set常用命令: (1)添加/删除元素 添加 sadd myli ...

  6. 整理Javascript基础数据和引用数据复制值的问题

    Javascript数据分为两大类:1.基础类型(原始类型数据) 2.引用类型.他们的存储方式是不同的 基础类型的数据存储是保存在栈内存中的: 例如: var a=1; var b=a; var a= ...

  7. 在Word 中撰写并发布到博客的帮助

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  8. SpringMVC源码解析 - HandlerAdater - ModelAndViewContainer上下文容器

    HandlerAdapter在处理请求时上下文数据的传递工作是由ModelAndViewContainer负责的. 源码注释是这样描述的: Records model and view related ...

  9. 转：css实现强制不换行/自动换行/强制换行

    css实现强制不换行/自动换行/强制换行 [日期:2007-08-22] 来源:  作者: [字体:大 中 小] 强制不换行 div{ white-space:nowrap;} 自动换行 div{  ...

  10. [label][Apache] VirtualHost

    <VirtualHost *:80>    ServerName   localhost    DocumentRoot "D:\www"</VirtualHos ...