元素的mouseleave是鼠标移出后会触发，但是如果元素本身消失了呢？

Question

场景是写了一个自定义指令，代码如下：

    /**
     * 文字提示自定义指令
     * binding里传入配置对象，对应tooltipComponent里data的每一项
     */
    Vue.directive('tooltip', {
      bind: (el, binding) => {
        el.addEventListener('mouseenter', event => {
          event.stopPropagation()
          // needBeforeShow用于判断是否需要前置判断
          const { needBeforeShow } = binding.value
          if ((needBeforeShow && Vue.prototype.$tooltipComponent.beforeShow(el)) || !needBeforeShow) {
            Vue.prototype.$tooltipComponent.show({ ...transferData(binding.value), target: el })
          }
        })
        el.addEventListener('mouseleave', event => {
          event.stopPropagation()
          Vue.prototype.$tooltipComponent.close()
        })
      }
    })

正常的情况还好，但是如果鼠标悬浮到按钮上，按钮提示了文本，点击按钮后路由跳转，按钮消失了，这时候永远不会触发mouseleave了，只有把鼠标移入tooltip里再移出tooltip才会消失，该怎么解决这个问题呢？

Answer 1

点击之后手动触发一下 用ref拿到dom元素 手动触发一下mouseleave事件

Answer 2

在跳转前执行Vue.prototype.$tooltipComponent.close()不就可以喽

Answer 3

一般在元素卸载时还需要执行 removeEventListener 来卸载掉之前监视的事件,同样可以在卸载时关掉提示框,卸载可以在 unbind 执行