Vue 使用v-title时鼠标悬浮，定位获取不到click事件，导致跳转页面悬浮无法消失问题

前言

使用v-title进行鼠标悬浮提示，（为了考虑悬浮样式多样化，引用了网上的title.js,然后在js中进行修改，目前样式如下图），引用后样式修改了，但是会出现一些问题，比如悬浮的位置不固定，正常的情况出现在文字的正上方，时而会出现左下方（定位是通过计算的哈，这个可以根据引用的js,自行修改哈），然后目前我的这个项目中出现了一种情况就是，在这个页面中时，鼠标悬浮样式，没有在点击事件之后消失，悬浮还在跳转的页面中，查看了js文件后，发现计算获取并没有问题，但是在鼠标点击跳转的时候，获取不到点击事件“click”，因为我是通过鼠标获取点击事件然后进行判断，移除鼠标悬浮样式的，所以查看啦半天很是头疼。不过最后通过各种尝试，终于找到解决了办法。。开心。。。。

一、效果

图为点击按钮前的鼠标状态

图为点击按钮后跳转到新页面后的样式（鼠标悬浮仍然存在）

二、代码查看

<div v-show="isShowBtnEdit" v-title="'点击对此建议进行编辑处理'" class="btnEdit" @click="isShowEdit">
	<i class="el-icon-edit" />
	<span>编辑</span>
</div>

查看代码发现我的代码并没有任何问题，我的点击事件也有并且也生效，但是这个悬浮却不能识别出来点击事件，这是为什么呢。。。。。。后来经过不断的尝试发现

更改后的代码

 <div v-show="isShowBtnEdit" v-title="'点击对此建议进行编辑处理'" class="btnEdit" @click="isShowEdit">
    <div v-title="'点击对此建议进行编辑处理'">
      <i class="el-icon-edit" />
      <span>编辑</span>
    </div>
  </div>

以上的代码就解决了这个问题，并且也成功的捕捉到了点击事件，那么这个问题是为什么呢？

三、示例讲解

四、结论

所以我的这个问题是因为包含关系导致无法捕获到点击事件后导致悬浮不消失，如果有同样的类型问题可以查看下可以在你的title上加个标签，避免同级使用。希望我的这个问题可以帮助到大家，如果解释的有问题多多留言指教！感谢感谢哈！！！