给伪元素添加点击事件

想要给元素的伪元素添加点击事件可以分两种情况，第一种情况是元素本身没有点击事件，只有伪元素有，第二种情况是元素与伪元素都具有点击事件。

1. 只有伪元素有点击事件

这种情况比较简单，只需要让元素本身不响应鼠标事件，让伪元素响应鼠标事件即可，然后直接将事件添加在元素上。

.element {
   pointer-events:none;
}
 
.element::before {
   pointer-events:auto;
}

2. 伪元素与元素同时具有点击事件

这种解决方案适用于伪元素定位与元素不重合的位置。可以在点击事件中判断点击的位置来区分事件发生在元素上还是伪元素上。

const userDown = (fileName, newName, event) => {
  // 判断点击事件发生的位置是否是伪元素上
  if (event.offsetX < 0) {
    // 伪元素的事件单独处理
    return
  }
  downFile(fileName, newName)
}

css

 li {
        cursor: pointer;
        font-size: 20px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #303133;
        height: 32px;
        line-height: 32px;
        vertical-align: middle;
        position: relative;
        &::before {
          position: absolute;
          left: -56px;
          top: 0;
          display: block;
          width: 32px;
          height: 32px;
          content: ' ';
        }
    }