有的时候我们需要实现这样的功能:

点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了

html:
<div id="outer">
<div class="inner"> </div>
</div>
css:
#outer{
width:100px;
height:100px;
background:darkgrey;
}
#outer>.inner{
width:50px;
height:50px;
background:red;
position:relative;
}
js:
var outer = document.querySelector('#outer');
var inner = document.querySelector('#outer>.inner');
outer.addEventListener('click',function(){
alert('outer');
});
inner.addEventListener('click',function(e){
e.stopPropagation();
},true);

查看效果

javascript阻止事件冒泡的方法的更多相关文章

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

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

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

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

  3. javascript 阻止事件冒泡 cancelBubble

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

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

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

  5. JavaScript阻止事件冒泡(兼容IE、Chrome、FF)

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

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

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

  7. jquery阻止事件冒泡的方法

    $("table tbody").click(function(e) { e.preventDefault(); //阻止自身的事件,并不能阻止冒泡 e.stopPropagati ...

  8. javascript 阻止事件冒泡

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

  9. JavaScript阻止事件冒泡

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

随机推荐

  1. 搭建Easyui环境在Myeclipse或Eclipse中

    转自:https://www.cnblogs.com/henuyuxiang/p/4283018.html 1.下载Easyui.网址:http://www.jeasyui.com/download/ ...

  2. OCX RegSvr32 error

    [Window Title]RegSvr32 [Content]The module "tt.ocx" failed to load. Make sure the binary i ...

  3. C# XML 文件中的空格值问题

    C# XML 文件中的空格值问题 运行环境:Window7 64bit,.NetFramework4.61,C# 6.0: 编者:乌龙哈里 2017-02-15 近期正在写我的简易标记文件格式的程序, ...

  4. Spring Cloud Zuul 1(API 网关服务)

    API网关是一个更为智能的应用服务器,它的存在就像是整个微服架构系统的门面一样,所有的外部客户端访问都需要经过它来进行调度和过滤. 它实现的功能包括:请求路由.负载均衡.校验过滤等功能. Spring ...

  5. shell编程之sed编辑器&gawk程序

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://twentyfour.blog.51cto.com/945260/560372 s ...

  6. POJ1161(并查集)

    1.题目链接地址 http://poj.org/problem?id=1161 2.源代码 #include <iostream> using namespace std; ]; ]; i ...

  7. Java,猜猜输出是什么?

    看看下面代码的输出是什么: public class MemoeryManager { public static void main(String[] args){ String a="a ...

  8. 【FZU2280】Magic

    题意 给出n个字符串,每个字符串有一个权值wi 有q个操作,操作有两种 1 x y 将字符串x的权值变为y 2 x 查询操作,输出以字符串x为后缀,且权值小于等于wx的字符串个数.其中n<=10 ...

  9. 刷题向》关于一道奇怪的贪心(田忌赛马)BZOJ1034(NORMAL-)

    这道题一看就是一道贪心,比较简单,但是越容易的题考试的时候越容易错... 没什么好说的,一遍SORT之后,直接强行田忌赛艇(滑稽脸)就好啦. 注意在对比大小的时候不仅要从前还要从后同时,不过这两个情况 ...

  10. SimpleTag——认识自定义标签

    自定义标签 自定义标签的开发与应用步骤 编写完成标签功能的 Java 类(标签处理器) 编写标签库描述(tld)文件,在tld文件中对自定义中进行描述 在 JSP 页面中导入和使用自定义标签 ①. 创 ...