请问如何使hover事件穿透而保留click事件？

Question

问题描述

如图，期望效果为在鼠标悬浮于某个节点上时，展示选项可以点击操作。但现在鼠标移动至选项图标上时会导致脱离节点hover，失去高亮和图标，偶现不停闪烁，如最下方图片所示。

其中选项图标是通过计算出的当前选择的节点位置进行定位的span。

相关代码

<template>
<div class="wrapper"style="height:100%;">
  <div class="tableTreeWrapper"style="height:100%;">
    <i-tree
    ref="tableTree"
    data="treeData"
    loadChildren="loadData"
    @node-select="nodeclick"
    @mouse-enter-node="handleNodeMouseEnter"
    @mouse-leave-node="handleNodeMouseLeave"
    ></i-tree>
  </div>
  <span ref="floatToolbar"style="floatToolbarstyle"v-show="isShowIcon">
    <svg class="icon card-icon-btn"aria-hidden="true"v-show="this.showUpdate"@click="doUpdate"><use xlink:href="#icon18_T_A_NW_bianji"/><title></title></svg>
    <svg class="icon card-icon-btn"aria-hidden="true"v-show="this.showDelete"@click="doDelete"><use xlink:href="#icon16_GJ_A_NW_shanchu"/><title></title></svg>
  </span>
  <TableModal ref="tableModal"@refresh="refresh"></TableModal>
  <GroupModal ref="groupModal"@refresh="refresh"></GroupModal>
</div>
</template>

    handleNodeMouseEnter (INode, event) {
      this.isShowIcon = true
      this.showUpdate = true
      this.showDelete = true
      this.floatToolbarTop = event.target.offsetHeight * INode.vnode.getIndex() - this.scrollTop
      this.selectNode = INode.getData()
    },
    handleNodeMouseLeave (INode, event) {
      this.isShowIcon = false
      this.showUpdate = false
      this.showDelete = false
    },

Answer 1

最简单的办法：把三个按钮放在同样一行里面，这样 hover 就不会跟按钮冲突。

比较麻烦的办法：侦听行元素的 hover 事件，人工改变它的状态。

Answer 2

试试在样式上加一个
pointer-events: none;

Answer 3

在按钮组件上监听鼠标移入移出事件，事件中设置下三个变量isShowIcon、showUpdate、showDelete的值，移入为true，移除为false

Answer 4

封装的限制太多了，为啥不自己写一个呢？下面是一个纯 CSS 实现的树

https://codepen.io/xboxyan/pe...

文章链接：https://segmentfault.com/a/11...