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

2024-03-20 16:47:55

问题解决

@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事件

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

安装pytorch时，anaconda的Jupyter Notebook中出现实心圆，并且代码失效的解决办法
最近我开始进行深度学习(Pytorch),需要用到anaconda中Jupyter Notebook的torch模块,因为之前闲暇时下载过anaconda,以为可以直接加载torch模块,是我太天真了 ...
在vue中用户点击播放音频没有声音的解决办法
点击第二次才有声音,让用户双击的话很不友好,这里给他设置了两个事件 <div class="opw-div_but" @touchstart="submit&quo ...
eclipse中格式化代码快捷键Ctrl+Shift+F失效的解决办法
很长一段时间我的eclipse都有个毛病,就是当我要格式化代码的时候,右键-source-format能够起效,但ctrl+shift+f不好使了. 可以基本断定是快捷键与别的软件冲突了,但一直也没时 ...
vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层翻阅了一些博客,发现好多都提到了mous ...
WPF中的鼠标事件详解
WPF中的鼠标事件详解 Uielement和ContentElement都定义了十个以Mouse开头的事件,8个以PreviewMouse开头的事件,MouseMove,PreviewMouseMov ...
WPF中对鼠标事件转换为命令处理模式的鼠标位置参数传递及EventArgs传递
在WPF中使用命令模型,对于实现ICommandSource的元素来讲,比较方便,对于未实现ICommandSouce的元素来讲可以利用Blend中提供的行为来解决.通常情况下,命令对象可以传递命令参 ...
vue中点击事件的写法_vue中的事件：原生事件与自定义事件__Vue.js
模板编译 processAttrs 对于ast attributes处理(v-on/@) 利用onRE与dirRE来捕获事件这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称 ...
OpenCV-Python实战（番外篇）——OpenCV中利用鼠标事件动态绘制图形
OpenCV-Python实战(番外篇)--OpenCV中利用鼠标事件动态绘制图形使用鼠标事件动态绘制动态绘制图形动态绘制图形和文本相关链接使用鼠标事件动态绘制我们已经在<OpenC ...
vue中enter回车键事件
项目中在搜索商品时,在没有搜索按钮的情况下,刚开始是写的当用户输入完成后,input框失去焦点blur事件处理,产品提议用户输入后,按enter回车键返回搜索结果. vue中失去焦点事件写法:@blu ...

最新文章

热门文章