兼容各大浏览器的JavaScript阻止事件冒泡代码


Posted in Javascript onJuly 09, 2015

这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之。

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>阻止事件冒泡</title>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/jquery.cookie.js"></script>
  <style type="text/css">
  </style>
  <script type="text/javascript">
    function clickDiv(){
      alert("clickDiv");
    }
    function clickP(event){
      stopEvent(event);
      alert("clickP");
    }
    function stopEvent(event){ //阻止冒泡事件
     //取消事件冒泡
     var e=arguments.callee.caller.arguments[0]||event; //若省略此句,下面的e改为event,IE运行可以,但是其他浏览器就不兼容
     if (e && e.stopPropagation) {
     // this code is for Mozilla and Opera
     e.stopPropagation();
     } else if (window.event) {
     // this code is for IE
      window.event.cancelBubble = true;
     }
    }
  </script>
</head>
<body>
  <div onclick="clickDiv()" style="width:100px; height:100px; background-color:red;">
    <p onclick="clickP(event)" style="width:50px; height:50px; margin:auto; background-color:green;">
      abad
    </p>
  </div>
  <script type="text/javascript">
  </script>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
3种js实现string的substring方法
Nov 09 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
JavaScript包装对象使用详解
Jul 09 #Javascript
jquery实现表单验证并阻止非法提交
Jul 09 #Javascript
jQuery实现tab选项卡效果的方法
Jul 08 #Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 #Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 #Javascript
详细分析JavaScript变量类型
Jul 08 #Javascript
js实现图片点击左右轮播
Jul 08 #Javascript
You might like
解析php常用image图像函数集
2013/06/24 PHP
IE和Firefox下event事件杂谈
2009/12/18 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
jQuery冲突问题解决方法
2021/01/19 jQuery
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
十条建议帮你提高Python编程效率
2016/02/16 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
机电一体化专业应届生求职信
2013/11/27 职场文书
《桥》教学反思
2014/04/09 职场文书
操行评语大全
2014/04/30 职场文书
农业开发项目建议书
2014/05/16 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
党组织结对共建协议书
2016/03/23 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL