前端 - 元素的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

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

Answer 2

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

Answer 3

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