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 相关文章推荐
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 Javascript
浅谈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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
中学生个人自我评价
2014/02/06 职场文书
优秀部门获奖感言
2014/02/14 职场文书
质量承诺书格式
2014/05/20 职场文书
小学捐书活动总结
2014/07/05 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
门球健将观后感
2015/06/16 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python
前端JavaScript大管家 package.json
2021/11/02 Javascript
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
Python中re模块的元字符使用小结
2022/04/07 Python