CSS事件穿透

一、什麼是CSS事件穿透？

CSS事件穿透指的是鼠標事件（如click、hover等）在父元素上失效，穿透到子元素上觸發。在某些特殊情況下，開發者希望透過子元素觸發父元素的鼠標事件。而CSS事件穿透可以幫助我們實現這一需求。

二、如何實現CSS事件穿透？

在常規情況下，鼠標事件只會在其所在元素上觸發。但是，在CSS中有一個pointer-events屬性，可以改變元素的鼠標事件行為。默認情況下，pointer-events被設置為auto，表示元素能夠觸發鼠標事件。但是，當pointer-events被設置為none時，元素不能觸發鼠標事件。而當pointer-events被設置為all時，元素可以觸發鼠標事件，並且事件可以穿透到下一層元素。

以下是一個簡單的代碼示例，演示了如何使用pointer-events來實現CSS事件穿透：

.parent {
  width: 300px;
  height: 200px;
  background-color: gray;
}
.child {
  width: 100px;
  height: 100px;
  background-color: white;
  pointer-events: all;
}

在這個例子中，父元素是一個灰色的div，子元素是一個白色的div。子元素的pointer-events被設置為all，表示它可以觸發鼠標事件，並且事件可以穿透到下一層元素，即父元素。如果我們希望在父元素上觸發點擊事件，我們可以這樣來實現：

$('.child').click(function(event) {
  // 這裡是子元素的click事件處理函數
  event.stopPropagation();
});
$('.parent').click(function() {
  // 這裡是父元素的click事件處理函數
});

這裡我們通過jQuery綁定了子元素和父元素的click事件處理函數。在子元素的事件處理函數中，我們使用了event.stopPropagation()方法，來停止事件冒泡。這樣，點擊子元素時就只會觸發子元素的事件處理函數，而不會繼續冒泡到父元素。如果不阻止事件冒泡，那麼點擊子元素時就會同時觸發子元素和父元素的事件處理函數。

三、CSS事件穿透的應用場景

下面是一些CSS事件穿透的常見應用場景：

1、模擬click事件

在某些情況下，我們想要在父元素上觸發click事件，但是又不想影響子元素的click事件。這時候，我們可以在子元素上使用pointer-events:none，這樣子元素就不能觸發click事件了。然後，在父元素上綁定click事件，就可以在不影響子元素click事件的情況下，在父元素上觸發click事件。

2、實現鼠標懸停效果

有時候我們想要在鼠標懸停在子元素上時改變父元素的樣式。這時候，我們可以在子元素上使用pointer-events:none，這樣子元素就不會觸發鼠標懸停事件了。然後，在父元素上綁定hover事件，就可以在鼠標懸停在子元素上時改變父元素的樣式。

3、實現拖拽效果

在拖拽某些元素時，我們可能需要使用一個固定的父元素作為拖拽區域。這時候，我們可以在子元素上使用pointer-events:none，這樣子元素就不會影響拖拽效果。然後，在父元素上綁定mousedown事件，在它的事件處理函數中記錄鼠標的位置，並將父元素設置為絕對定位。接着，在document上綁定mousemove和mouseup事件，在mousemove事件處理函數中計算父元素的位置，並更新它的CSS樣式。在mouseup事件處理函數中，取消mousedown事件處理函數，並將父元素設置為相對定位。