Vue 在同一元素上实现单击、双击事件（将其自定义指令）

前景：在同一元素上绑定单双击事件，当双击时，单击事件也会随之触发，那么如何实现双击、单击不互相影响呢？如下

1. 定义directives.js

import Vue from 'vue'const clickDown = Vue.directive('clickDown', {inserted(el, binding, vnode) {let clickTimer = null// 单击el.addEventListener('click', () => {if (clickTimer) {window.clearTimeout(clickTimer);clickTimer = null;}clickTimer = setTimeout(() => {vnode.context[binding.value.clickFun](binding.value.clickFunType);}, 300);})// 双击el.addEventListener('dblclick', () => {if (clickTimer) {window.clearTimeout(clickTimer);clickTimer = null;}vnode.context[binding.value.dblclickFu](binding.value.dblclickFuType);})},
});export default { clickDown }

2. 在main.js中，引入上面的文件

import directive from './utils/directives'Vue.use(directive)

3. 在元素上使用自定义指令

 <div v-clickDown="{ clickFun: '需要调用单击的方法', clickFunType: '单击方法的入参数' }"></div>

Vue 在同一元素上实现单击、双击事件（将其自定义指令）相关推荐

Vue 框架-02-事件：点击, 双击事件,鼠标移上事件
Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({//注意代码格式//el:eleme ...
JS中解决单击双击事件的冲突
当一个元素上即绑定了单击事件又绑定了双击事件,双击元素时会先触发单击事件,没有达到我们理想的效果从而影响了用户体验. 解决方法: // 解决同一个元素使用单击双击事件的冲突 // 解决思路:单击事件后 ...
android vue.js点击反应慢,解决vue 界面在苹果手机上滑动点击事件等卡顿问题
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, ( ...
vue移动端点击事件延迟_解决Vue 界面在苹果手机上滑动点击事件等卡顿问题_莺语_前端开发者...
用 (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局页面内容在对应的组件的最外层div上加上这样的样式: .conten ...
Vue 获取DOM元素，给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况给标签绑定ref属性使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...
JS中解决单击双击事件的冲突的问题
当一个父节点上即绑定了双击事件,子节点又绑定了单击时,单击或双击子节点时,根据事件流中的冒泡阶段都会先触发子节点上的单击事件,然后冒泡到父节点,而有时我们并不想要子节点的单击事件触发解决思路: 1. ...
JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突，双击事件触发单击事件
js 的单双击事件同时存在会有一个问题:双击事件会同时触发单击事件,两个事件存在冲突. 我们加一个延迟时间就能很好的解决这个问题. 原理: 当接收到第一个点击时,我们先把单击事件存储在这个是全局变量 ...
二、Vue（发送AJAX请求、Vue生命周期、计算属性、属性和方法、自定义指令、过渡(动画)）
一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用 ...
js自定义双击事件(可更改双击触发间隔，解决单击双击事件冲突)
思路: 设置一个计数器,用来记录点击的次数. 点击第一次:创建定时器,300毫秒后,执行单击操作,并将计数器归零点击第二次:定时器还没有触发,删除定时器.执行双击操作,并将计数器归零 // 定时器 ...
vue 界面在苹果手机上滑动点击事件等卡顿解决方案
用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题,(1 ...

Vue 在同一元素上实现单击、双击事件（将其自定义指令）

Vue 在同一元素上实现单击、双击事件（将其自定义指令）相关推荐

最新文章

热门文章

Vue 在同一元素上实现单击、双击事件 （将其自定义指令）

Vue 在同一元素上实现单击、双击事件 （将其自定义指令）相关推荐

最新文章

热门文章

Vue 在同一元素上实现单击、双击事件（将其自定义指令）

Vue 在同一元素上实现单击、双击事件（将其自定义指令）相关推荐