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

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

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. IIS设置Access-Control-Allow-Origin

    打开iis,找到“HTTP响应标头”点进去, 在右侧可以看到添加,然后添加如下标头即可Access-Control-Allow-Headers:Content-Type, api_key, Autho ...

  2. Arcgis engine编程报错查询(转)

    Arcgis engine编程报错查询 标签: arcgis arcengine arcgisengine 2016年04月10日 17:29:35429人阅读 评论(0) 收藏 举报  分类: Ar ...

  3. LoadRunner 事物

    添加事物 Action() { lr_start_transaction("openindex"); web_url("WebTours", "URL ...

  4. Codeforces 1109D (树的计数问题)

    思路看这篇博客就行了:https://www.cnblogs.com/zhouzhendong/p/CF1109D.html, 讲的很好 今天学到了prufer编码,这是解决树上计数问题的一大利器,博 ...

  5. iframe 模拟ajax文件上传and formdata ajax 文件上传

    对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe  的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...

  6. Stream01 定义、迭代、操作、惰性求值、创建流、并行流、收集器、stream运行机制

    1 Stream Stream 是 Java 8 提供的一系列对可迭代元素处理的优化方案,使用 Stream 可以大大减少代码量,提高代码的可读性并且使代码更易并行. 2 迭代 2.1 需求 随机创建 ...

  7. 243. Shortest Word Distance 最短的单词index之差

    [抄题]: Given a list of words and two words word1 and word2, return the shortest distance between thes ...

  8. Auto Control 001 自动控制的一般概念

    自动控制的基本概念 一 . 自动控制系统的组成 自动控制装置:自动控制装置的组成当中涉及到了这样这样一些东西: 第1,需要有被控对象,那么这些被控对象需要有谁来控制呢?一定要有控制器,这些控制器,我们 ...

  9. R dataframe 遗忘, which 矩阵搜索

    A data frame is used for storing data tables. It is a list of vectors of equal length. For example, ...

  10. 写一段php代码,确保报个进程同时写入同一个文件