CSS 是前端開發(fā)常用的技術(shù)之一，它可以幫我們實(shí)現(xiàn)頁面的樣式設(shè)計和布局。但是在開發(fā)過程中，我們也會遇到一些問題，比如事件穿透。事件穿透是指鼠標(biāo)點(diǎn)擊一個元素后，事件卻傳遞到了下層的元素上，這種現(xiàn)象會給用戶帶來不好的用戶體驗(yàn)。那么，如何在 CSS 中有效地防止事件穿透呢？

首先，我們需要了解 CSS 的兩種事件模型：冒泡和捕獲。冒泡模型是指事件先在嵌套層級較深的元素（子元素）觸發(fā)，然后再逐層往上冒泡到外層的元素（父元素），而捕獲則相反，事件會從外層開始逐層往下捕獲到目標(biāo)元素。在事件觸發(fā)時，默認(rèn)是先冒泡后捕獲。

// 冒泡模型
document.getElementById('child').addEventListener('click', function() {
console.log('child clicked')
})
document.getElementById('parent').addEventListener('click', function() {
console.log('parent clicked')
})
點(diǎn)擊 child 會輸出：
child clicked
parent clicked
// 捕獲模型
document.getElementById('child').addEventListener('click', function() {
console.log('child clicked')
}, true) // 捕獲
document.getElementById('parent').addEventListener('click', function() {
console.log('parent clicked')
}, true)
點(diǎn)擊 child 會輸出：
parent clicked
child clicked

我們可以利用事件模型來防止事件穿透。比如，在需要防止事件穿透的元素上，設(shè)置 pointer-events 屬性為 none，這樣點(diǎn)擊事件就會直接落在下方的元素上，而不會穿透到下下層的元素上。當(dāng)然，這種方法只適用于支持 pointer-events 屬性的瀏覽器。

// 防止事件穿透的元素
// 下方的元素
Click me!
點(diǎn)擊 grand-child 不會觸發(fā) child 的點(diǎn)擊事件。

另外，我們也可以利用 event.stopPropagation() 來防止事件穿透。在子元素上捕獲事件，并在事件處理函數(shù)中調(diào)用 event.stopPropagation() 即可防止事件冒泡至父元素。

document.getElementById('child').addEventListener('click', function(event) {
console.log('child clicked')
event.stopPropagation()
})
document.getElementById('parent').addEventListener('click', function() {
console.log('parent clicked')
})
點(diǎn)擊 child 不會觸發(fā) parent 的點(diǎn)擊事件。

總之，在開發(fā)過程中，我們需要根據(jù)具體情況，靈活運(yùn)用事件模型和屬性來防止事件穿透，從而提升用戶體驗(yàn)。