热门关键字:
jquery > jquery教程 > html5 > vue 鼠标移入移出事件执行多次(尤其ie)

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

588
作者:管理员
发布时间:2020/3/18 10:24:38
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=1056

  <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

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

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

  最好这么写

  <pclass="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兼容的时候要卡死






如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:html
友荐云推荐