vue的鼠标事件
1. mouseenter :进入2. mouseover:在3. mousemove:移动4. mouseout:移出5. mouseleave:离开6. click:单击7. mousedown:按下鼠标8. mouseup:松开鼠标9. dblclick:双击
·
一、悬浮事件:
- mouseenter :进入
- mouseover:在
- mousemove:移动
- mouseout:移出
- mouseleave:离开
<div class="container" style="width: 100px;height: 100px;background: #42B983;"
@mouseenter="enter"
@mouseover="over"
@mousemove="move"
@mouseout="out"
@mouseleave="leave">
</div>
执行的顺序如下
二、点击事件
- click:单击
- mousedown:按下鼠标
- mouseup:松开鼠标
- dblclick:双击
<div class="container" style="width: 100px;height: 100px;background: #FFC0CB;margin-top: 30px;"
@click="oneclick"
@mousedown="down"
@mouseup="up"
@dblclick="doubleclick">
</div>
执行的顺序如下
利用鼠标事件可以实现进入特定区域实现某些效果;如进去选中范围之后把覆盖的图片隐藏;这里我是用了定时器setTimeout(大概是0.6s)当鼠标进入时隐藏上层的图片;显示进度条,内容和弹幕
更多推荐
已为社区贡献1条内容
所有评论(0)