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

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

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. 使用Nuget发布自己的类库包

    NuGet是一个为大家所熟知的Visual Studio扩展,通过这个扩展,开发人员可以非常方便地在Visual Studio中安装或更新项目中所需要的第三方组件,同时也可以通过NuGet来安装一些V ...

  2. linux上搭建图片服务器

    之前写过一个搭建图片服务器的随笔:https://www.cnblogs.com/xujingyang/p/7163290.html   ,现在回头看看,我去,感觉写的好乱,现在再整一个吧.o(╯□╰ ...

  3. mongo状态查看方法

    列举一些常用的mongodb状态查看方法. 1.mongostat 是mongdb自带的状态检测工具, inserts/s 每秒插入次数 query/s 每秒查询次数 update/s 每秒更新次数 ...

  4. 框架面试题:谈谈我对Spring IOC与DI的理解

    IOC是一种叫做“控制反转”的设计思想. 1.较浅的层次——从名字上解析 “控制”就是指对 对象的创建.维护.销毁等生命周期的控制,这个过程一般是由我们的程序去主动控制的,如使用new关键字去创建一个 ...

  5. 解决error C2365

    今天把一个FILE_BOTH_DIRECTORY_INFORMATION结构的变量,愣是写成了“enum”枚举....然后出现error C2365错误. 在CSDN上看到别人遇到问题,有人回复了“如 ...

  6. eclipse——Maven插件创建java工程

    目录结构如下 注意默认JDK为1.5 更改默认JDK  方式一 右键工程 选中JRE1.5 Remove 双击JRE System Library 点击Finish 更改完成 方式二 配置maven ...

  7. html页面源代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. oracle数据库数据类型和约束

    今天为大家分享一下关键数据库里面的数据类型和约束.我们都知道国家要讲法律,干什么事情都要遵守法律,比如小的时候你上学的时候要遵守课堂纪律.不能迟到和早退,同样的我们在数据库中创建一些表.或者查询一些表 ...

  9. C/C++预处理指令常见的预处理指令

    C/C++预处理指令常见的预处理指令如下: #空指令,无任何效果 #include包含一个源代码文件 #define定义宏 #undef取消已定义的宏 #if如果给定条件为真,则编译下面代码 #ifd ...

  10. C# JSON使用的常用技巧(二)

    JSON在php里一句json_encode就可以得到 在C#里我们同样也很容易的可以得到 用到的类库:Newtonsoft.Json.dll 实体类: class Cat { public stri ...