首先展示基础代码
<style> // 伪类元素父盒子 .button-text { width: 300px; height: 200px; background-color: antiquewhite; } // 给元素添加 伪类元素 .button-text::after { content: ''; width: 30px; height: 30px; background-color: red; display: block; transform: translateX(100px) translateY(100px); } </style> </head> <body> // 元素 <div class="button-text"></div> </body>
产生的效果如下：
思考：如何让 红色方块点击后会有事件？
利用事件冒泡原则
当我给盒子添加 点击事件的时候 他会事件冒泡到父元素上，
所以 给父元素点击事件，那么红色的方块也会触发事件
因此我们首先给父元素 添加点击事件
const button = document.querySelector('.button-text') button.addEventListener('click', () => { console.log('被点击了'); })
第二步 使用 pointer-events 这个属性 来控制这个元素是否可以触发事件
.button-text { // .... pointer-events: none; // 禁止触发事件 } .button-text::after { content: ''; // .... pointer-events:all; // 可以触发事件 }
这样就可以达到 让伪元素添加事件的效果了。
也可以避免组件冗余，添加类名即可
