js阻止冒泡和默认事件(默认行为)详解


Posted in Javascript onOctober 20, 2016

本文实例为大家分享了js阻止冒泡默认事件方法,供大家参考,具体内容如下

阻止冒泡。冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了。下面的domo就是很好的例子。

<!DOCTYPE html> 
<html> 
 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
      #box { 
        width: 300px; 
        height: 300px; 
        background: red; 
        display: none; 
      } 
    </style> 
    <script type="text/javascript"> 
      window.onload = function() { 
          var btn = document.getElementById('btn'); 
          var box = document.getElementById('box'); 
          btn.onclick = function(ev) { 
            var oEvent = ev || event; 
            box.style.display = 'block'; 
            //oEvent.cancelBubble = true;//高版本浏览器 
            stopBubble(oEvent); 
            //在低版本的chrome和firefox浏览器中需要兼容性处理 
            //高版本chrome和firefox浏览器直接使用上面这行代码即可 
          } 
          document.onclick = function() { 
            box.style.display = 'none'; 
          } 
 
        } 
        //阻止冒泡事件的兼容性处理 
      function stopBubble(e) { 
        if(e && e.stopPropagation) { //非IE 
          e.stopPropagation(); 
        } else { //IE 
          window.event.cancelBubble = true; 
        } 
      } 
    </script> 
  </head> 
 
  <body> 
    <input type="button" id="btn" value="语言" /> 
    <div id="box"></div> 
  </body> 
 
</html>

我所实现的效果是:点击按钮btn让box显示,而点击其他地方则让box消失。
如果我不阻止冒泡的话,那么首先btn会触发点击时间,让盒子显示,但是由于box是包含在document中的,所以会向上冒泡又触发document的点击事件,盒子又消失。这个事件的执行顺序可以在不同的点击事件中使用alert来验证。关于cancelBubble的兼容性处理在高版本的chrome和firefox中已经不需要兼容处理了,直接使用oEvent.cancelBubble = true 即可。下面的阻止浏览器事件的兼容性处理在高版本浏览器中同样不需要。

默认事件。即浏览器本身具备的功能。

function preventDefa(e){ 
  if(window.event){ 
    //IE中阻止函数器默认动作的方式  
    window.event.returnValue = false;  
  } 
  else{ 
    //阻止默认浏览器动作(W3C)  
    e.preventDefault(); 
  }  
}

这种是兼容性写法,但是如果你只需要支持高版本浏览器的话,那么如上文一样,一句话即可。

btn.onclick = function (){ 
  return false; 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
浅谈JS中String()与 .toString()的区别
Oct 20 #Javascript
详解javascript事件绑定使用方法
Oct 20 #Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 #Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 #Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 #Javascript
yarn与npm的命令行小结
Oct 20 #Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 #Javascript
You might like
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
python连接数据库的方法
2017/10/19 Python
python用户管理系统
2018/03/13 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
Python类型转换的魔术方法详解
2020/12/23 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
给分销商的致歉信
2014/01/14 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
外贸英文求职信范文
2015/03/19 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
python非标准时间的转换
2021/07/25 Python
人民币符号
2022/02/17 杂记
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang