在vue中使用鼠标事件@mousedown、@mouseenter等失效的解决办法，以及PC端长按实现 |
您所在的位置：网站首页 › vue过时 › 在vue中使用鼠标事件@mousedown、@mouseenter等失效的解决办法，以及PC端长按实现 |
|
问题解决
@mouseenter、@mousedown等鼠标事件[非鼠标点击事件]时，发现事件不触发，失效了 此时应该在@mouseenter、@mouseenter等鼠标事件加上native属性就好了 Vue官方是这样介绍的——将原生事件绑定到组件 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符： PC端长按实现---我的代码 // 移动 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事件 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |