HTML标签伪元素绑定事件的三种方式

本篇文章给大家带来的内容是对于HTML标签伪元素绑定事件的三种方式，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。 本篇文章给大家带来的内容是对于HTML标签伪元素绑定事件的三种方式，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

比来项目中碰到点击一个图标施行某些操纵的功能，原来很简略就能实现，但图标却是 ::after 伪元素实现的，在印象中宛如不克不及直接对伪元素进行 dom 操纵，可项目中有所有页面都是通过伪元从来展现图标的，将所有页面中图标改成 DOM 元素也不太可行。
在网上查了下，大局部都是介绍通过 event 对象猎取鼠标指针坐标的方式推断点击的区域可否为伪元素所在的区域，但这很烦费事。

下面整理出几种简捷方式实现 click 伪元素时进行事件处置，附上例子代码。

HTML构造

第一 HTML 构造是这样的

    按钮文字

实现办法

首先种

通过 CSS3 的 pointer-events 特性来实现。

CSS 代码

JavaScript 代码

《script》
    document.querySelector('section').addEventListener('click', ()=>{
        console.log('只要点击伪元素才干触发click');
    });
《script》

第二种

通过阻止事件冒泡的方式实现

CSS根基代码同上，将 pointer-events: none; 和 pointer-events: auto; 。

《script》
    document.querySelector('section').addEventListener('click', ()=>{
        // 由于其他子元素事件冒泡被阻止了，所以点击section的时候，只剩下伪元素遮盖区域进入到事件监听中
        console.log('只要伪元素才干触发click');
    });

    document.querySelector('span').addEventListener('click', ev=>{
        // 阻止文字元素的事件冒泡
        ev.stopPropagation();
    });
《script》

第三种

通过 event 对象的指针坐标来推断点击的可否在伪元素范畴内，这种方式网上许多，大家去度娘一下就有了。

最后就是，实在不过关就不要运用 ::after 了，换成现实 dom 节点吧，啊O(∩_∩)O哈哈~

本篇文章到这里就已经全部完毕了，更多其他出色内容可以关注百分百源码网的HTML视频教程栏目！

以上就是HTML标签伪元素绑定事件的三种方式的细致内容，更多请关注 百分百源码网 其它相干文章！