博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue.js实现移动端长按事件,处理长按事件和click事件冲突,长按安卓机支持震动...
阅读量:4322 次
发布时间:2019-06-06

本文共 3625 字,大约阅读时间需要 12 分钟。

export default {    install(Vue, options = {        time: 1000    }) {        Vue.directive('longpress', {            bind: function (el, binding, vNode) {                // 确保提供的表达式是函数                if (typeof binding.value !== 'function') {                    // 获取组件名称                    const compName = vNode.context.name;                    // 将警告传递给控制台                    let warn = `[longpress:] provided expression '${binding.expression}' is not afunction, but has to be `;                    if (compName) {                        warn += `Found in component '${compName}' `;                    }                    console.warn(warn);                }                var startX, startY, startTime;                // 定义变量                let pressTimer = null;                // 定义函数处理程序                // 创建计时器( 1秒后执行函数 )                let start = (e) => {                    if (e.type === 'click' && e.button !== 0) {                        return;                    }                    e.preventDefault();                    // 记录下触发的坐标和时间                    startTime = (new Date()).getTime();                    startX = e.targetTouches[0].clientX;                    startY = e.targetTouches[0].clientY;                    /**                    *  注意:此处处理长按震动效果,经测试IOS目前不支持震动                    **/                     if (pressTimer === null) {                        pressTimer = setTimeout(() => {                            navigator.vibrate = navigator.vibrate                                || navigator.webkitVibrate                                || navigator.mozVibrate                                || navigator.msVibrate;                            if (navigator.vibrate) {                                // 支持                                navigator.vibrate(200);                            }                            // 执行函数                            handler();                        }, options.time);                    }                            };                // 取消计时器                let cancel = (e) => {                  /**                   *  注意:此处处理与click事件的冲突(小于300ms可以识别为点击事件的范围 然后判断触摸点的移动距离)                   **/                    e.preventDefault();                    var now = (new Date()).getTime();                    if (now - startTime < 300) {                        var x = (Math.abs(startX - e.changedTouches[0].clientX) < 30);                        var y = (Math.abs(startY - e.changedTouches[0].clientY) < 30);                        if (x && y) {                            e.changedTouches[0].target.click();                        }                    }                    // 检查计时器是否有值                    if (pressTimer !== null) {                        clearTimeout(pressTimer);                        pressTimer = null;                    }                };                // 运行函数                const handler = (e) => {                    // 执行传递给指令的方法                    binding.value(e);                };                /**                   *  注意:禁止浏览器长按出菜单                 **/                document.oncontextmenu = function (e) {                    e.preventDefault();                    return false;                };                // 添加事件监听器                el.addEventListener('mousedown', start);                el.addEventListener('touchstart', start);                // 取消计时器                el.addEventListener('mouseout', cancel);                el.addEventListener('touchend', cancel);                el.addEventListener('touchcancel', cancel);            }        });    }};

转载于:https://www.cnblogs.com/Lewiskycc/p/10209749.html

你可能感兴趣的文章
socket笔记
查看>>
Java 概述及安装使用
查看>>
helloworld
查看>>
港交所OMD-C对接笔记
查看>>
线程安全问题了解一下
查看>>
转:IPv4的地址真的用光了吗
查看>>
java rmi远程方法调用实例
查看>>
Linux设置环境变量小结
查看>>
syslog()用法
查看>>
Java 内存区域和GC机制
查看>>
STM32上不使用外部晶振,OSC_IN和OSC_OUT的接法
查看>>
设计模式六大原则
查看>>
android中的数据库操作
查看>>
当用updatepanel和scriptmanager时,弹出框
查看>>
如何破解百度云大文件下载限制
查看>>
冒泡排序
查看>>
react中<link>和<navlink>区别
查看>>
C# 生成随机数
查看>>
Psutil模块的应用
查看>>
session概述
查看>>