前端 - 元素的mouseleave是鼠标移出后会触发，但是如果元素本身消失了呢？
场景是写了一个自定义指令，代码如下：
/** * 文字提示自定义指令 * 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才会消失，该怎么解决这个问题呢？
共有3个答案
一般在元素卸载时还需要执行 removeEventListener 来卸载掉之前监视的事件,同样可以在卸载时关掉提示框,卸载可以在 unbind 执行
在跳转前执行Vue.prototype.$tooltipComponent.close()不就可以喽
点击之后手动触发一下 用ref拿到dom元素 手动触发一下mouseleave事件
-
问题内容： 总览 我具有以下HTML结构，并且将和事件附加到了元素上。 问题 当我将文件拖到时，事件将按预期触发。但是，当我将鼠标移到子元素（例如）上时，会为该元素触发该事件，然后为该元素触发该事件。 如果我再次将鼠标悬停在该元素上，则再次触发该事件，这很酷，但是随后为刚刚剩下的子元素触发了该事件，因此执行了该指令，这并不酷。 此行为有问题的原因有两个： 我只附加＆，所以我不明白为什么子元素也要附
-
问题内容： 我正在寻找一个DOM事件，该事件可以通过JavaScript进行监听，以了解通过打开选择元素（但未更改任何选项）然后通过关闭选择元素（在页面上其他位置）来关闭该元素。 这不是选择事件，因为选择保留了焦点。同样，这不是一些其他元素或文档或事件或窗口，文档或身体。 这不是选择事件，因为选择中的任何选项都没有更改。 我不关心旧版Internet Explorer，而只是在符合标准的现代浏览器
-
要从复杂对象中删除某些字段。 我想删除'阴谋'
-
本文向大家介绍html元素哪些标签是不可替换元素？哪些是可替换元素？相关面试题，主要包含被问及html元素哪些标签是不可替换元素？哪些是可替换元素？时的应答技巧和注意事项，需要的朋友参考一下 （replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。也就是说，css 可以影响元素但是不能影响其内容的显示。 可替换元素： …
-
问题内容： 为什么我们永远不能将元素作为元素的子元素？ 我用以下代码制作了一个网页 在这里，元素是p元素的子元素。但是，在所有主流浏览器（Chrome，Firefox和Internet Explorer-所有最新版本）中，其解释如下 我通过右键单击元素（在Chrome中）并选择检查元素选项来对其进行检查。我在Chrome中看到了它，但是其他两个浏览器的行为也相同（CSS选择器“ p ul”无法正常