HTML标签伪元素绑定事件的三种方式-百分百源码网

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

发布时间：09/01 来源：未知浏览：关键词：

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

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

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

HTML构造

第一 HTML 构造是这样的

<section>
    <span>按钮文字</span>
</section>

实现办法

第一种

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

CSS 代码

<style>
    *{margin: 0; padding:0;}
    section{
        border: 1px solid #abc;
        border-radius: 5px;
        background-color: #def;
        font-family: Microsoft YaHei;
        height: 40px;
        box-sizing: border-box;
        cursor: pointer;
        font-size: 16px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        pointer-events: none;    /* 关键点在这里，元素制止响应鼠标事件 */
    }

    section::after{
        content: '';
        border-left: 1px solid #abc;
        display: inline-block;
        width: 24px;
        height: 100%;
        background-size: contain;
        background-position: center;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABEklEQVRoQ+2X3Q3CMAyE3Y3YBDZAbOBRzAaMwkiMgCqlUoX4SX13qiKcl77Uzn13ddpONviaBtdvBbB3gpVAJQA6UI8QaCBcXgnAFoINKgHQQLhcmoC738zsHhHzVbJkAE38uam+qCAkAC/iF+clEHSAD+JlEFSAH+IlEDSATvF0CArARvFUCBggKZ4GAQG4+8HMTuABHxHxyPaAALKbMusKgOlmptd/J9CG+JhxblVz3XWIhz5GFxeTEJSPO9oMbISgiJ8NpAHMzTohaOLpAB0QVPESgC8QdPEygDcQEvFSgBXEmD/14Mutu5x6CnXvSryxAIhmplpVAinbiEWVANHMVKtKIGUbsagSIJqZajV8Ak/MSlox+m54VQAAAABJRU5ErkJggg==);

        pointer-events: auto;    /* 关键点在这里，伪元素覆盖父元素的 pointer-events: none ，响应鼠标事件 */
    }

    section span{
        display: inline-block;
        height: 100%;
        vertical-align: top;
        line-height: 40px;
        padding-left: 10px;
    }
</style>

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哈哈~

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

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

打赏