css中为伪元素增加点击事件和hover

鼠标悬停在父元素上面时为伪类元素增加样式

<!-- html结构 -->
<div class="father"></div>

   <style>

        .father::after {
            content: 'after';
        }

        .father:hover::after {
            color: pink;
        }
    </style>

伪元素添加点击事件

冒泡和捕获问题

事件冒泡是指发生在子元素身上的事件，会冒泡至父元素身上。

事件捕获是指发生在子元素身上的事件，会先执行父元素身上的事件，再执行子元素身上的事件。

在js中怎么禁止？

使用event.stopPropagation

在vue中怎么禁止？

• .stop 阻止冒泡事件

• .capture 设置捕获事件

• .self 只有点击当前元素的时候，才会触发处理函数

• .once 处理函数只被触发一次

注：这些事件修饰符都是可以链式调用的

基本实现思路：

使用pointer-events这个属性。

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target

通俗点就是说，就是设置允不允许这个元素被鼠标操作。

• 首先，我们给div标签样式添加pointer-events: none;，此时这个标签永远不会成为鼠标事件的target，也就是说我们无论如何点击这个div标签，都是不会触发该标签绑定的btnClick()回调函数
• 然后，我们给该标签的::after伪元素（::before也是可以的）样式里添加一句pointer-events: auto;，相当于给这个伪元素开启了鼠标事件，当我们点击该伪元素时，可以冒泡到父元素的点击事件去。

方法缺陷：

• 无法区分是哪一个伪元素出发的父元素的点击事件
• 父元素中的所有鼠标事件都被禁止，包括hover

伪类元素的好处：提高性能，优化SEO