Vue如何给一个元素绑定两个事件

最新推荐文章于 2023-05-10 20:17:04 发布
最新推荐文章于 2023-05-10 20:17:04 发布
阅读量5.6k 收藏 1
点赞数
文章标签： vue openlayer iview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42317225/article/details/88995842
版权

此按钮需要在单击时将目标平移到地图中心；双击时缩放到合适大小
在这里插入图片描述
也就是给同一元素绑定单击click和双击事件dblclick，并执行不同逻辑
示例如下：

<Button  @dblclick.native="zoomCenter" @click="fitToXinDu" icon="md-disc"></Button>

.native主要用于监听组件根元素的原生事件,主要是给自定义的组件添加原生事件。
官方对.native修饰符的解释为：有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native

恭宽信
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue的touchStart事件及click事件冲突问题
11-20
一 、问题： 今天遇到这样问题，给某个元素同时绑定touchStart及click事件后，若在移动设备上，当你点击时，会依次出发这两个事件。因为移动端设备上的click事件触发是会延迟300ms，所以touchStart事件会先触发后再触发click事件。这样导致每次都要执行两次，这样毫无意义。这里提醒下，PC是无法识别touch相关事件 二、解决方式 （1）preventDefault方法 通过使用preventDefault方法（阻止元素默认事件行为的发生）来解决。在touchstart中添加 e.preventDefault()就可以阻止click事件触发。 模板 <ul class
vue click点击绑定两个事件
骨子里的偏爱
03-15 3567
vue click点击绑定两个事件
vue学习经验总结（同一元素绑定多个事件时）
huhuhuja
09-27 419
1.同一个元素绑定多个事件时 @click="getIndex1();getIndex2()" 2.在组件中，有多个绑定 事件时 @click="() => { $emit('toDetail',id); $emit('getDetail',id) }"
vue 点击一个按钮触发两个事件_vue 两个按钮触发条件相同，怎么点击一个按钮，只在按钮本身添加类名，另一个不变...
weixin_39851977的博客
12-21 940
问题描述两个控制全选的按钮(全选5，全选4)，只有点击了才添加on类名，因为代码里绑定的事件都相同，所以点击之后两个按钮都添加了类名问题出现的环境背景及自己尝试过哪些方法尝试用不同的index，只有当它等于index才添加类，但是后面不好控制，需要点击别的项目，全选按钮的on去掉相关代码// 请把代码文本粘贴到下方(请勿用图片代替代码)全选5分全选4分new Vue({el: '#app',dat...
vue可以同时有2个点击事件吗_vue 开启和禁用button点击事件的2种方式
weixin_29310605的博客
01-30 2750
1.通过设置button样式来控制点击事件是否启用通过给button设置样式来控制点击事件是否显示兑换var vm = new Vue({el: '#app',data: {message: 3},mounted() {if(this.message>5){$('.butt').html('已兑换').addClass('disbutt')}else{$('.butt').html('兑换'...
vue可以同时有2个点击事件吗_Vue-2-循环和点击事件(留言板事例)
weixin_39653448的博客
02-22 405
用到Bootstrap,和Vue的点击事件,循环,和数据取值 Bootstrap需要jQuery.js入门v-on:click="函数"v-on:click/mouseout/mouseover/dblclick/mousedown.....{{message}}{{ value1}}--{{index}}--{{key}}{{ value2}}--{{index}}{{value}}//循环va...
vue的事件绑定与方法详解
08-29
事件绑定是指将一个事件与一个方法绑定在一起，例如点击事件、双击事件、鼠标悬停事件等等，而方法是指在 Vue 实例中定义的一些函数，以便在特定的事件发生时执行这些函数。 一、事件绑定 在 Vue 中，事件绑定是...
vue实现给div绑定keyup的enter事件
10-15
在Vue.js中，有时我们需要为DOM元素，如`div`，绑定键盘事件，特别是像`keyup`这样的事件，以便在用户按下特定键时执行某些操作。在这个案例中，重点是实现`keyup.enter`事件，即当用户按下回车键时触发的事件。然而...
vue绑定的点击事件阻止冒泡的实例
08-28
例如，在上面的代码中，我们在一个 div 元素上绑定了一个点击事件，但是，我们不想让该事件冒泡到父元素上。那么，我们可以使用.stop 修饰符来阻止事件冒泡。 例如，在下面的代码中，我们在 button 元素上绑定了一...
vue实现多个元素或多个组件之间动画效果
10-17
为了解决这个问题，我们需要给每个元素添加一个唯一的`key`属性，使得Vue不再复用它们，而是创建新的元素进行过渡。例如： ```html <div v-if='show' key='hello'>hello world <div v-else key='bye'>bye world ```...
使用 Vue 绑定单个或多个 Class 名的实例代码
08-28
在上面的例子中，我们定义了两个变量 `show1` 和 `show2`，然后在模板中使用 `:class` 指令将这两个变量绑定到 `div` 元素上，通过布尔值来控制 Class 名的显示。 使用 Vue 绑定单个或多个 Class 名可以使用多种...
Vue、React同一个dom元素绑定多个点击事件
雷佳佳的博客
11-15 1085
Vue:<button type="button" @click="vueA();vueB()">vue</button> React:<button type="button" onClick={(event) => { ReactA(); ReactB();}}>react按钮</button> js(vue) methods:{ ...
vue3一个元素绑定两个或多个事件
m0_74238181的博客
05-10 1484
fun1(),fun2()为两个不同的事件，这里需要注意一下，如果事件为表达式，函数后面可以不加小括号。但是如果事件是方法，函数后面就一定要加小括号，否则就不会执行未加小括号的事件。
vue可以同时有2个点击事件吗_在Vue组件中获取全局的点击事件方法
weixin_35500243的博客
01-30 1882
使用场景：在Vue组件中点击某元素之外的地方移除该元素需求：如上图所示，“用户列表”页面有三个Vue组件组成，分别是“菜单组件”，“导航组件”和“列表组件”。其中“列表组件”中包含一个“下拉菜单”，当我们点击“下拉菜单”以外的区域隐藏下拉菜单。解决方法一：出现“下拉菜单”的同时，建一个透明的遮罩层，然后只有“下拉菜单”可以点，点击遮罩层就隐藏。缺点：z-index层数要控制好，还有就是如果点击其他...
vue中一个dom元素可以绑定多个事件？
岁末zzz的博客
06-22 943
其实这个问题有多个解决方法的 这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数 这时候千万别忘记
前端进阶-Vue学习二：Vue事件，双向数据绑定（Vue事件，双向数据绑定）
weixin_45058869的博客
05-25 278
Vue事件 指令v-on 格式 v-on:eventType = “事件处理程序名称” 简写 @eventType = ‘事件处理程序名称’ 参数 <body> <div id="app"> <h3> 普通事件 </h3> <button v-on:click = 'normalHandler'> 普通事件 &lt...
vue为同一个元素绑定多个事件以点击事件为例的写法
qq_41973526的博客
01-05 984
vue为同一个元素绑定多个事件：如点击事件为例
GridView中如何实现双重点击事件
liugx588的专栏
02-14 3599
GridView也是列表View，与ListView相比，他的列数不固定，与Gallery相比，他的行数大于1，所以GridView算是集成了ListView和Gallery。我们知道，如果要实现GridView中的Item的点击事件，直接设置OnItemClickListener即可。但是会有这样的情况，子Item中想要单独实现个别的点击事件，这时一个Item就会有两种点击事件，一个是整体的It
vue中@click绑定多个事件（教你避坑）
热门推荐
LLL3189860667的博客
09-27 1万+
亲爱的小伙伴，你可能还不知道，使用@click绑定多个事件的时候有一个小坑坑，因为刚刚我就遇到了，所以，为了你不再踩坑，我就将自己的经验分享给你，希望能够有所帮助哦！如果你不加小括号，那么方法就一定不会生效的。非表达式的方法一定要加上小括号，
vue绑定两个blur事件
最新发布
06-13
要绑定两个 `blur` 事件，可以在元素上使用 `v-on` 指令，并指定多个事件名称，例如： ``` <input v-on:blur="handleBlur1; handleBlur2" /> ``` 这里使用分号将两个事件名称分隔开来，表示需要绑定两个 `blur` 事件。在 Vue 中，可以在方法中定义多个事件处理函数，例如： ``` methods: { handleBlur1() { console.log('失去焦点事件1') }, handleBlur2() { console.log('失去焦点事件2') } } ``` 这样，当 `input` 元素失去焦点时，会触发两个事件处理函数，分别输出 '失去焦点事件1' 和 '失去焦点事件2'。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值