鼠标事件mouseenter、mouseleave、mouseover、mouseout和滚轮事件mousewheel

鼠标事件

mouseenter、mouseleave和mouseover、mouseout的区别

• onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件
• onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

滚轮事件

• 场景
  当鼠标移动到图片上时，图片由鼠标滚轮控制放大缩小
• 问题
  由于该页存在滚动条，即使鼠标放到图片上，滑动滚轮时图片放大缩小的同时滚动条也在滚动
• 解决方法

元素绑定鼠标滚轮事件

<div id="topology_box"  @mousewheel="mousereWheel($event)" v-drag>
</div>

滚轮事件调用方法

methods:{
    mousereWheel(e){
      e.preventDefault()//阻止浏览器默认方法
      if(e.wheelDelta>0){
        this.boxSize+=0.01
      }else if(e.wheelDelta<0){
        this.boxSize-=0.01
      }
    },
}