极客观点
项目管理
HarmonyOS
先贴出代码
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<style>
#app {
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin:30px auto;
overflow: hidden;
position: relative;
}
#app ul li {
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="app" v-on:mouseover="test(1)" v-on:mouseout="test(0)">
<ul>
<li v-for="(item,index) in items">
<img v-bind:src="item.src">
</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
methods:{
test:function(number){
if( number == 1 ) //mouseover
{
console.log('mouseover');
}else {
console.log('mouseout');
}
}
},
data:{
items:[
{src:'https://img.alicdn.com/tps/TB1m.ToPpXXXXcVXXXXXXXXXXXX-520-280.jpg_.webp'},
{src:'https://img.alicdn.com/simba/img/TB1Hlp8PpXXXXbaXFXXSutbFXXX.jpg'},
{src:'https://img.alicdn.com/simba/img/TB1bGd3MXXXXXbWXVXXSutbFXXX.jpg'}
]
}
});
</script>
</body>
</html>
代码很简单，就是鼠标经过 和 移出。
问题就在于，当我们鼠标移到 图中我圈出红色的代码 会mouseout。而且就在那个范围里鼠标动来动去会不停地触发 这个2个事件。
按理来说这个只会触发一次mouseover。
大家测的时候就在#app 元素边框测试。
我想解决的问题是，当我们移入#app元素上，应该只会触发一次mouseover， 移出只会触发一次mouseout。
用事件委托试试，或者是写定时器，500毫秒只能执行一次，或者用 e.preventDefault();