<div>分層點擊是指在網(wǎng)頁中有多個重疊的<div>元素時，通過點擊來選擇不同的元素進行操作。在HTML中，<div>元素用于定義文檔中的分區(qū)或節(jié)，可以對其進行樣式編輯、添加事件監(jiān)聽等操作。通過對<div>元素進行嵌套，可以實現(xiàn)元素的分層，使其重疊在一起。當點擊<div>元素時，可以通過事件綁定和事件處理函數(shù)來判斷點擊的是哪個元素，從而實現(xiàn)分層點擊的效果。
下面通過幾個代碼案例來詳細解釋<div>分層點擊的原理和實現(xiàn)方法。
案例一：基本分層點擊 假設(shè)有兩個重疊在一起的<div>元素，它們分別是紅色和藍色的方塊。當點擊時，分別改變它們的背景顏色。
HTML代碼：

<div id="red-div"></div>
<div id="blue-div"></div>

JavaScript代碼：

var redDiv = document.getElementById("red-div");
var blueDiv = document.getElementById("blue-div");
<br>
redDiv.addEventListener("click", function() {
redDiv.style.backgroundColor = "yellow";
});
<br>
blueDiv.addEventListener("click", function() {
blueDiv.style.backgroundColor = "green";
});

點擊紅色方塊，它的背景顏色會變?yōu)辄S色；點擊藍色方塊，它的背景顏色會變?yōu)榫G色。通過給每個<div>元素添加事件監(jiān)聽，可以分別對它們進行點擊操作。
案例二：嵌套分層點擊 假設(shè)現(xiàn)在有三個重疊在一起的<div>元素，它們分別是紅色、綠色和藍色的方塊。當點擊紅色和綠色方塊時，分別改變它們的背景顏色；當點擊藍色方塊時，不改變顏色。
HTML代碼：

<div id="red-div">
<div id="green-div"></div>
</div>
<div id="blue-div"></div>

JavaScript代碼：

var redDiv = document.getElementById("red-div");
var greenDiv = document.getElementById("green-div");
var blueDiv = document.getElementById("blue-div");
<br>
redDiv.addEventListener("click", function() {
redDiv.style.backgroundColor = "yellow";
});
<br>
greenDiv.addEventListener("click", function() {
greenDiv.style.backgroundColor = "purple";
});
<br>
blueDiv.addEventListener("click", function(event) {
event.stopPropagation();
});

點擊紅色方塊，它的背景顏色會變?yōu)辄S色；點擊綠色方塊，它的背景顏色會變?yōu)樽仙稽c擊藍色方塊時，不會有任何變化。通過給<div>元素添加嵌套和事件監(jiān)聽，可以實現(xiàn)分層點擊效果，并且可以通過stopPropagation()方法來阻止點擊事件傳遞到父級元素。
通過以上兩個案例，我們可以看到<div>分層點擊是通過對每個元素添加事件監(jiān)聽來實現(xiàn)的。通過判斷點擊的是哪個元素，可以選擇不同的操作。在實際應(yīng)用中，可以通過<div>分層點擊來實現(xiàn)網(wǎng)頁中的交互效果，如點擊彈出提示框、選擇不同的菜單等。