在项目中遇到的问题,因为是手机端的遮罩层,为了给用户更好的体验,需要在遮罩层中点击没有内容的地方讲遮罩层进行隐藏
这个主要用的知识点是事件的冒泡和捕获
事件的冒泡:是从里向外,DOM的层次像冒泡一样,不断的向上一级上升
事件的捕获:是从外向里
注意:1.ie只有事件的冒泡没有事件的捕获
2,事件的捕获会先发生
例子:
<style>
.popup {display:none;position:fixed;width:100%;height:100%;left:0;top:0;z-index:300;background:rgba(0,0,0,0.6);filter:Alpha(opcity=60);overflow: auto;}
.abc{width: 100%;height: 100px;background-color: wheat}
.popup_hide{background-color: white;width: 100%;height: 100px;}
</style>
<div class="abc">
点我出现遮罩层哦
</div>
<div class="popup">
<div class="popup_hide">
asdfghjbvcsa
</div>
</div>
<script>
$('.abc').on("click",function(){
$('.popup').show();
});
$(".popup").on("click",function(){
$(this).hide();
});
$(".popup .popup_hide").on("click",function(e){
e.stopPropagation();
})
</script>
解析:点击的popup使整个遮罩层进行隐藏,点击内容块(.popup_hide)阻止了事件的冒泡,使popup_hide的父元素popup阻止,不会触发了这个事件
从而使点击popup_hide以外的内容将遮罩层进行隐藏
注意:引入jquery哦