移动端H5长按事件 vue自定义指令
import Vue from 'vue'
Vue.directive('longpress', function (el, binding){
var timer = null;
var start = function (e) {
// 如果是点击事件,不启动计时器,直接返回
if (e.type === 'click'){
return
}
if (timer == null){
// 创建定时器 ( 2s之后执行长按功能函数 )
timer = setTimeout(function () {
//执行长按功能函数
binding.value()
},2000)
}
}
var cancel = function () {
if (timer !== null){
clearTimeout(timer)
timer = null
}
} // 添加事件监听器
el.addEventListener("mousedown", start);
el.addEventListener("touchstart", start); // 取消计时器
el.addEventListener("click", cancel);
el.addEventListener("mouseout", cancel);
el.addEventListener("touchend", cancel);
el.addEventListener("touchcancel", cancel);
})
1.在src目录下 新建文件夹utils文件夹,然后新建derective.js,复制上方代码,粘贴到derective.js;
2.在main.js中引入 该自定义指令js
3.在html中可以这样使用即可
<h2 v-longpress="handleLongClick">测试长按事件是否生效</h2>
总结:支持移动端跟pc端
移动端H5长按事件 vue自定义指令的更多相关文章
- 【转】原生js实现移动端h5长按事件
$("#target").on({ touchstart: function(e) { // 长按事件触发 timeOutEvent = setTimeout(function() ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
- Vue自定义指令使用方法详解 和 使用场景
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
随机推荐
- Mysql创建数据库以及用户分配权限
一.创建mysql数据库 1.创建数据库语法 --创建名称为“testdb”数据库,并设定编码集为utf8 CREATE DATABASE IF NOT EXISTS testdb DEFAULT C ...
- WSL记录
cmder(mini版)作为wsl的终端,很好用,可以split屏.但是:千万不要在settings里面设置start up(启动) 里面设置 命令行“bash -cur_console:p1”!目前 ...
- 贴子详情接口偶发时延超过2s的问题
1. 发现问题 1. 查询慢access日志,发现偶尔有接口时延超过2s,发送概率1%左右 2. 排查 1. 写单元测试,多次测试后,不能重现问题 2. 接口代码里加日志,每隔 ...
- (转)Intellij Idea工具栏添加打开选中文件的资源管理器位置
背景:在idea的view>toolbar上面添加工具按钮,能够简化操作,现在添加打开资源管理按钮,后续功能待研究 Intellij Idea工具栏添加打开选中文件的资源管理器位置 工具栏-右击 ...
- MySQL ALTER TABLE语法
先看一下定义(密密麻麻) ALTER TABLE tbl_name [alter_specification [, alter_specification] ...] [partition_optio ...
- fineui 实现下拉框模糊查询
官网下拉框模糊查询只能实现首字母模糊匹配,如果实现类似这样的 like '%'+关键字+'%',却没有. 今天群里的没想好同学分享了,前后模糊匹配代码. 代码示例: <body> ...
- javascript两种循环写法
var i=0,len=cars.length; for (; i<len; ) { document.write(cars[i] + "<br>"); i++; ...
- 几个c++界面库的比较
有些人说QT比MFC简单,QT封装得太好了,给初学者错觉,QT很简单.QT实现的功能比MFC更多(多到有些时候你觉得QT真TM啰唆,但是有时又体会到他啰唆得很强大很有柔性),显然比MFC代码更多,运行 ...
- python学习-32 zip函数
zip 拉链方法 例如:1. ')))) 运行结果: [(')] Process finished with exit code 0 2. a = {'name':'abc','age':18,'ad ...
- GIL全局解释锁,死锁,信号量,event事件,线程queue,TCP服务端实现并发
一.GIL全局解释锁 在Cpython解释器才有GIL的概念,不是python的特点 在Cpython解释器中,同一个进程下开启的多线程,同一时刻只能有一个线程执行,无法利用多核优势. 1.GIL介绍 ...