幾種HTML標簽偽元素綁定事件的方式

oliverhuang 發布于2019-08-30 15:43 / 2011人閱讀

摘要：下面整理出幾種簡便方式實現偽元素時進行事件處理，附上例子代碼。代碼關鍵點在這里，元素禁止響應鼠標事件關鍵點在這里，偽元素覆蓋父元素的，響應鼠標事件代碼只有點擊偽元素才能觸發第二種通過阻止事件冒泡的方式實現基礎代碼同上，將和。

最近項目中遇到點擊一個圖標執行某些操作的功能，本來很簡單就能實現，但圖標卻是 ::after 偽元素實現的，在印象中好像不能直接對偽元素進行 dom 操作，可項目中有所有頁面都是通過偽元素來展示圖標的，將所有頁面中圖標改成 DOM 元素也不太可行。
在網上查了下，大部分都是介紹通過 event 對象獲取鼠標指針坐標的方式判斷點擊的區域是否為偽元素所在的區域，但這很煩麻煩。

下面整理出幾種簡便方式實現 click 偽元素時進行事件處理，附上例子代碼。

HTML結構

首先 HTML 結構是這樣的


    按鈕文字

實現方法 第一種

通過 CSS3 的 pointer-events 特性來實現。

CSS 代碼

JavaScript 代碼

第二種

通過阻止事件冒泡的方式實現

CSS基礎代碼同上，將 pointer-events: none; 和 pointer-events: auto; 。

第三種

通過 event 對象的指針坐標來判斷點擊的是否在偽元素范圍內，這種方式網上很多，大家去度娘一下就有了。

最后

最后就是，實在不行就不要使用 ::after 了，換成實際 dom 節點吧，啊O(∩_∩)O哈哈~

GPU云服務器云服務器 js 標簽綁定事件 html 偽標簽 html禁用元素標簽 js繼承的幾種方式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116033.html

幾種HTML標簽偽元素綁定事件的方式

摘要：下面整理出幾種簡便方式實現偽元素時進行事件處理，附上例子代碼。代碼關鍵點在這里，元素禁止響應鼠標事件關鍵點在這里，偽元素覆蓋父元素的，響應鼠標事件代碼只有點擊偽元素才能觸發第二種通過阻止事件冒泡的方式實現基礎代碼同上，將和。最近項目中遇到點擊一個圖標執行某些操作的功能，本來很簡單就能實現，但圖標卻是 ::after 偽元素實現的，在印象中好像不能直接對偽元素進行 dom 操作，可項目...

BakerJ 2019-08-02 16:09 評論0 收藏0
幾種HTML標簽偽元素綁定事件的方式

摘要：下面整理出幾種簡便方式實現偽元素時進行事件處理，附上例子代碼。代碼關鍵點在這里，元素禁止響應鼠標事件關鍵點在這里，偽元素覆蓋父元素的，響應鼠標事件代碼只有點擊偽元素才能觸發第二種通過阻止事件冒泡的方式實現基礎代碼同上，將和。最近項目中遇到點擊一個圖標執行某些操作的功能，本來很簡單就能實現，但圖標卻是 ::after 偽元素實現的，在印象中好像不能直接對偽元素進行 dom 操作，可項目...

Airmusic 2019-08-23 16:32 評論0 收藏0
面試知識點總結

摘要：最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。參考網站面試題圖片過多的時候如何優化圖標很多的時候可以用雪碧圖圖片過大時候可以壓縮一下。最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是ES6語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。有助于下次面試。 1.H...

王晗 2019-08-30 14:15 評論0 收藏0
面試知識點總結

摘要：最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。參考網站面試題圖片過多的時候如何優化圖標很多的時候可以用雪碧圖圖片過大時候可以壓縮一下。最近面試幾家前端職位，想知道目前的前端面試題是偏向哪一塊，都主要問到的是ES6語法，閉包，原型鏈，繼承那一塊。并且將面試題的知識點匯總一下。有助于下次面試。 1.H...

CrazyCodes 2019-08-22 15:46 評論0 收藏0