vue 鼠标移入移出事件执行多次(尤其ie)

2019-08-14 10:27:53来源:博客园 阅读 ()

来自:https://www.cnblogs.com/myfirstboke/p/9150809.html  侵删

<p  @mouseover="over($event)" @mouseout="out($event)">互相关注</p>


out (t) {
  t.target.innerText = '互相关注'
},
over (t) {
  console.log(t, 1)
  console.log(t.target.innerText, 1)
  t.target.innerText = '取消关注'
},
 不能这么写,这么写的话ie10点击取消关注会卡死,应为mouseover有冒泡,这里应该用mouseenter只在当前,不用event

****************************************************************************************************

****************************************************************************************************

最好这么写

<p class="focus-span" v-if="item.concernStatus==2" @click="focusTogether(item.userId)" @mouseenter="over" @mouseleave="out">{{msg}}</p>
data里面
msg:'互相关注'
out () {
  this.msg = '互相关注'
},
over () {
  this.msg = '取消关注'
},
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout;相当于有冒泡
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave
这样的话,mouseenter子元素不会反复触发事件,否则在IE中经常有闪烁情况发生。这就时为啥ie兼容的时候要卡死

 


原文链接:https://www.cnblogs.com/Byme/p/11303825.html
如有疑问请与原作者联系

标签:PSHTTPHTTPSCOM鼠标HTML

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js实现复制到剪切板

下一篇:vue-cli3构建ts项目