在vue中使用鼠标事件@mousedown、@mouseenter等失效的解决办法，以及PC端长按实现

问题解决

@mouseenter、@mousedown等鼠标事件[非鼠标点击事件]时，发现事件不触发，失效了

此时应该在@mouseenter、@mouseenter等鼠标事件加上native属性就好了

 

Vue官方是这样介绍的——将原生事件绑定到组件

你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符：

<base-input v-on:focus.native="onFocus"></base-input>

 

PC端长按实现---我的代码

<el-button
    @click="ptz_move()"
    @mousedown.native="moveStart"
    @mouseup.native="moveStop"
    @mouseout.native="moveStop"
    type="success"
    icon="el-icon-arrow-up"
    circle
></el-button>


// 移动
ptz_move() {
    console.log("000");
},
// 持续移动
moveStart() {
    let _this = this;
    this.timer && this.moveStop();
    this.timer = setInterval(() => {
        console.log("111");
      }, 80);
},
// 停止移动
moveStop() {
    clearInterval(this.timer);
},

 

三个事件的触发时机

mousedown

当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生 mousedown 事件。
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mouseup

当在元素上松开鼠标按键（左、右键均可）时，会发生 mouseup 事件。
与 click 事件不同，mouseup 事件仅需要松开按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

click

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click 事件。
注意：触发click事件的条件是按下并松开鼠标左键！，按下并松开鼠标右键并不会触发click事件。

 

三个事件的触发顺序

• 若在同一个元素上按下并松开鼠标左键，会依次触发mousedown、mouseup、click，前一个事件执行完毕才会执行下一个事件
• 若在同一个元素上按下并松开鼠标右键，会依次触发mousedown、mouseup，前一个事件执行完毕才会执行下一个事件，不会触发click事件