这里仅仅是一个简单代码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阻止事件冒泡(兼容IE、Chrome、FF)的更多相关文章

  1. JavaScript 阻止事件冒泡的实现方法

    JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...

  2. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

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

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

  4. javascript 阻止事件冒泡 cancelBubble

    javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...

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

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

  6. javascript 阻止事件冒泡

    阻止冒泡 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是 ...

  7. JavaScript阻止事件冒泡

    今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  8. javascript阻止事件冒泡的方法

    有的时候我们需要实现这样的功能: 点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了 html: <div id="outer&quo ...

  9. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

随机推荐

  1. iOSSingleton设计模式详细的说明教程

    iOS有很多的设计模式,当然,不管是什么语言有很多的设计模式.辛格尔顿是一种之一,辛格尔顿,它从字面上是一个单独的实例,首先,它是只有一个单一的,其次,它是一个实例.我们知道,在iOS用于开发Obje ...

  2. Java 8 时间日期库的20个使用示例

    java 8是如何处理时间及日期的 有人问我学习一个新库的最佳途径是什么?我的回答是,就是在实际项目中那样去使用它.在一个真实的项目中会有各种各样的需求,这会促使开发人员去探索和研究这个新库.简言之, ...

  3. Eclipse 打JAR包,插件FatJar 安装与使用

    下载fatJar插件,解压缩后是一个.../plugins/(net...)把plugins下面的(net..)文件夹拷贝到eclipse的plugins下,重新启动Eclipse3.1,Window ...

  4. _00013 一致性哈希算法 Consistent Hashing 新的讨论,并出现相应的解决

    笔者博文:妳那伊抹微笑 博客地址:http://blog.csdn.net/u012185296 个性签名:世界上最遥远的距离不是天涯,也不是海角,而是我站在妳的面前.妳却感觉不到我的存在 技术方向: ...

  5. 轮播图片 高效图片轮播,两个imageView实现

    该轮播框架的优势: 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 可修改分页控件位置,显示或隐藏 自定义分页控件的图片,就是这么个性 自带图片缓存,一次加载,永久使用 ...

  6. [Erlang危机](5.1.0)VM检测概述

    原创文章.转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface 把执行指标储存在VM的内存中.能够指定是全局的还是app所特有的. • vms ...

  7. 同TextView在不同的显示内容

    首先,请原谅我不能命名文章.. . 我们不能准确地表达你说说什么什么,真正急着赶智商. 直接在地图上 如图所看到的显示的是两个textview 第一个实现的是,在同一个textview中给不同内容赋予 ...

  8. RH133读书笔记(1)-Lab 1 Managing Startup

    Lab 1 Managing Startup Goal: To familiarize yourself with the startup process System Setup: A system ...

  9. 《数字图像处理原理与实践(MATLAB文本)》书代码Part7

    这篇文章是<数字图像处理原理与实践(MATLAB文本)>一本书的代码系列Part7(由于调整先前宣布订单,请读者注意分页程序,而不仅仅是基于标题数的一系列文章),第一本书特色186经225 ...

  10. UVa 514 Rails(经典栈)

     Rails  There is a famous railway station in PopPush City. Country there is incredibly hilly. The st ...