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

BakerJ 發(fā)布于2019-08-02 16:09 / 3367人閱讀

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

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

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

HTML結構

首先 HTML 結構是這樣的


    按鈕文字

實現(xiàn)方法 第一種

通過 CSS3 的 pointer-events 特性來實現(xiàn)。

CSS 代碼

JavaScript 代碼

第二種

通過阻止事件冒泡的方式實現(xiàn)

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

第三種

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

最后

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

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

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

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

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

oliverhuang 2019-08-30 15:43 評論0 收藏0
幾種HTML標簽偽元素綁定事件的方式

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

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

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

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

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

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