关于div的禁止点击事件

情景一：阻止外层div点击事件pointer-events: none;

<div class="out" style="pointer-events: none;">
　　<div class="in" onClick="inBlock()">这是我的提示框<br/>这是我的提示框<br/>这是我的提示框<br/>这是我的提示框<br/></div>
</div>

需要注意的是如果在外层div设置了禁止点击，则里层div的点击事件无效的

情景二：外层点击事件不受里面div影响

也就是说我只想点击透明部分隐藏我的遮罩层

<div class="out" onclick="outBlock()">
　　<div class="in">这是我的提示框<br/>这是我的提示框<br/>这是我的提示框<br/>这是我的提示框<br/></div>
</div>

 这时候只需要在我的div中加一段代码，就能有效阻止内层点击事件对外层的影响

onClick="event.cancelBubble = true"或

onClick="event.stopPropagation();"

<div class="in" onClick="event.cancelBubble = true">这是我的提示框<br/>这是我的提示框<br/>这是我的提示框<br/>这是我的提示框<br/></div>

这两种方法都能够有效阻止事件的冒泡，区别大家可以看看其他博客。

情景三：若外层div与内层div都需要执行点击且不同事件

与情景二的情况相同，我们都需要阻止事件的进一步冒泡行为

<div class="out" onclick="outBlock()">
　　<div class="in" onClick="inBlock()">这是我的提示框<br/>这是我的提示框<br/>这是我的提示框<br/>这是我的提示框<br/></div>
</div>
<script>
　　var div1 = document.getElementsByClassName("out");
　　var div2 = document.getElementsByClassName("in");
　　function outBlock(){
　　　　div1[0].style.display = "none"
　　}
　　function inBlock(){
　　　　alert("这是一个内层点击");
　　　　//event.cancelBubble = true;
　　　　event.stopPropagation();
　　}
</script>