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

不言
发布: 2019-03-30 10:47:28
转载
4810人浏览过

本篇文章给大家带来的内容是关于html标签伪元素绑定事件的三种方式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

最近项目中遇到点击一个图标执行某些操作的功能,本来很简单就能实现,但图标却是 ::after 伪元素实现的,在印象中好像不能直接对伪元素进行 dom 操作,可项目中有所有页面都是通过伪元素来展示图标的,将所有页面中图标改成 DOM 元素也不太可行。
在网上查了下,大部分都是介绍通过 event 对象获取鼠标指针坐标的方式判断点击的区域是否为伪元素所在的区域,但这很烦麻烦。

3425417128-5c9e2b01f313c_articlex.png

下面整理出几种简便方式实现 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标签伪元素绑定事件的三种方式的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号