zoukankan      html  css  js  c++  java
  • javascript阻止事件冒泡的方法

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

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

    html:
    <div id="outer">
    	<div class="inner">
    		
    	</div>
    </div>
    
    css:
    #outer{
    	100px;
    	height:100px;
    	background:darkgrey;
    }
    #outer>.inner{
    	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);
    

    查看效果

    ------学习贵在分享,贵在记录,贵在总结。
  • 相关阅读:
    A
    N
    M
    L
    K
    J
    sass
    通过ps给透明通道的图片添加灰度(适用于需要兼容IE7,效果很好)
    CSS十一问——好奇心+刨根问底=CSSer
    清除浮动的7种方法
  • 原文地址:https://www.cnblogs.com/kevin1220/p/5737514.html
Copyright © 2011-2022 走看看