關於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>