你能偵測 CSS 偽元素上的點擊事件嗎？

偽元素上的點擊事件偵測

問題：

在提供的程式碼中，偽元素（紅色位元）和主元素（藍色位元）都會觸發點擊事件。但是，目標是僅檢測偽元素上的點擊。這可能嗎？

答案：

不，不可能直接偵測偽元素上的點選事件，因為它們不作為文件物件的一部分存在模型（DOM）。偽元素是瀏覽器產生的虛擬元素，不屬於實際 HTML 結構的一部分。

替代方法：

如果需要實現點擊專門針對紅色區域的處理程序，您可以建立一個子元素，例如span：

<p>
  <span class="red-bit"></span>
  Lorem ipsum dolor sit amet, ...
</p>

然後，將樣式套用到span元素：

.red-bit {
  position: absolute;
  left: 100%;
  width: 10px;
  height: 100%;
  background-color: red;
}

最後，將點擊處理程序綁定到span 元素：

document.querySelector(".red-bit").addEventListener("click", function() {
  // Click handler code
});

這種方法允許您捕獲紅色區域上的點擊，同時防止觸發點擊在主要元素上。

以上是你能偵測 CSS 偽元素上的點擊事件嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！