伪元素绑定事件

最新推荐文章于 2024-01-18 11:34:23 发布

qq_16714671

最新推荐文章于 2024-01-18 11:34:23 发布

阅读量557

点赞数

分类专栏： javascript 文章标签： javascript css html

原文链接：https://www.cnblogs.com/seize-today/p/15188488.html

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

方式一C3属性：给元素设置pointer-events: none ，给伪元素设置pointer-events: auto；
方式二：通过事件冒泡；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .li {
        height: 20px;
        background-color: #ccc;
        color: #000;
        /* pointer-events: none */
    }
    .li::after {
        content: '>';
        color: red;
        /* pointer-events: auto */
    }
</style>

<buttom id="hhh" class="li">
    <span id="cont">主元素</span>
</buttom>

<script>
    let dom = document.getElementById('hhh')
    dom.addEventListener('click', function (e) {
        // e.stopPropagation()
        if (e.target.id == 'cont') {
            alert(1)
        }
        //冒泡
        if (e.target.id == 'hhh') {
            alert(2)
        }
    })

</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_16714671

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
伪元素绑定事件

方式一C3属性：给元素设置pointer-events: none ，给伪元素设置pointer-events: auto；方式二：通过事件冒泡；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .li { heig.
复制链接

扫一扫