码迷,mamicode.com
首页 > Web开发 > 详细

web前端入门到实战:几种HTML标签伪元素绑定事件的方式

时间:2019-12-16 22:33:17      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:响应   事件监听   log   family   css   bbb   ima   ==   section   

下面整理出几种简便方式实现 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>
web前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(从零基础开始到前端项目实战教程,学习工具,职业规划)

第二种

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

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 节点吧

web前端入门到实战:几种HTML标签伪元素绑定事件的方式

标签:响应   事件监听   log   family   css   bbb   ima   ==   section   

原文地址:https://blog.51cto.com/14592820/2459102

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!