阻止伪元素点击事件（事件冒泡、事件捕获）

优化体验：元素上绑定了点击事件，该元素上设置伪元素是为了画指引竖线，因此不希望伪元素上触发点击事件。

<!--HTML-->
<div @click="handleClick" class="wapper">
  <ul>
    <li>apple</li>
    <li>banana</li>
  </ul>
</div>

<!--JS-->
handleClick(e) {
  console.log(e.target,e.currentTarget);
}

<!--CSS-->
.wapper {
   width: 24px;
   height: 24px;
   background: url('./click-img') repeat;
}
.wapper::before {
   content: '----';
   writing-mode: vertical-lr;//文本排布，此属性值代表垂直方向内内容从上到下，水平方向从左到右
}
.wapper::after {
   content: '----;
}

首先想让该元素及其子元素都具有该点击事件，利用了事件委托机制。

事件委托（它的本质是DOM元素的事件冒泡）：

   1）节省内存占用，减少事件注册；

   2）动态绑定事件，无需对新增子元素添加绑定事件。

   注意：使用“事件委托”时，并不是说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也需要耗时，越靠近顶层，事件的”事件传播链”越长，也就越耗时。如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失。

事件冒泡分为三个阶段：

    1）捕获阶段：从window对象传导到目标节点（上层传到底层），这个阶段不会响应事件；

    2）目标阶段：在目标节点上触发；

    3）冒泡阶段：从目标节点传导回window对象（从底层传回上层）。

刚开始是想利用事件捕获不让伪元素可点击：

handleClick(e) {
  console.log(e.target,e.currentTarget);
  if(e && e.target == e.currentTarget) {
    //执行操作 
  }else {
    return;
  }
}

但是，伪元素属于该元素，即点击伪元素时e.target == e.currentTarget 的值true。

查阅后，使用css3属性 pointer-events，可行。

.wapper::before {
   content: '----';
   pointer-events: none;//
   //pointer-events: auto;与不设定该css属性时效果相同
}

.wapper::after {
   content: '----;
   pointer-events: none;
}

pointer-events取值为none、auto时适用所有元素，其它取值(visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all) 仅适用svg。