如何偵測HTML中偽元素的點擊事件？

偵測偽元素上的點擊事件

在HTML 中，偽元素擴展了元素的樣式和視覺功能，但實際上並不存在於元素中DOM 樹。當嘗試專門檢測偽元素上的點擊事件時，這提出了挑戰。

考慮以下 HTML 和 CSS：

<p>Lorem ipsum dolor sit amet</p>

p {
    position: relative;
    background-color: blue;
}

p:before {
    content: '';
    position: absolute;
    left:100%;
    width: 10px;
    height: 100%;
    background-color: red;
}

在此範例中，

元素有一個超出其右邊緣的紅色偽元素。目標是僅在紅色區域而不是藍色矩形上觸發點擊事件。

解決方案

不幸的是，無法將事件直接綁定到偽-elements，因為它們不是 DOM 樹的一部分。單擊處理程序只能綁定到其父元素。

要實現所需的功能，需要解決方法：

• 建立一個子元素，例如 ，並將其放在緊接著開頭的位置

• 將CSS 樣式應用於.p span 而不是p:before。
• 將點擊處理程序綁定到 .p span 元素。

這種方法本質上是模擬偽元素的行為，同時允許對感興趣的特定區域進行事件處理。

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