vue 鼠标移入移出事件执行多次(尤其ie)
2023-09-14 09:06:33 时间
来自: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兼容的时候要卡死
相关文章
- Vue_(基础)Vue中的事件
- VUE - 取消默认事件
- vue框架-基础1-vue包引入,指令,模板语言
- [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
- vue.js语法
- Web前端 - Vue
- vue事件修饰符:v-once只执行一次
- vue事件修饰符:通过@click.capture捕获内层事件(爷爷-父亲-儿子)
- vue事件修饰符:通过@click.prevent 阻止事件的默认行为
- vue事件修饰符:通过@click.self的self属性来阻止内层向外层冒泡
- vue element-ui 树形
- Vue2.js:v-click-outside自定义指令和vue-click-outside监听鼠标点击元素外部区域事件
- Vue学习之--------事件的基本使用、事件修饰符、键盘事件(2022/7/7)
- vue 获取 DOM 元素的方法
- 179:vue+openlayers 绘制点,判断它是否在一个电子围栏之内
- 134:vue+openlayers 编辑事件modifystart和modifyend(示例代码)
- 事件监听 & 页面滚动(页面滚动到某一位置时显示/隐藏某元素,Vue环境)
- vue监听手机键盘搜索事件
- Vue实现淘宝商品放大镜效果