<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        let oBox = document.querySelector("#box")
        tap(oBox, function (e) {
            console.log(e); // 利用的touchend的事件对象
            console.log('哈哈 自定义的tap事件触发啦');
        })
        // 移动端原生没有一个完成的点按事件  click: 完整的点击 默认300ms延迟   用户体验不好
        // 点按事件 tap 延迟要短/快  150ms    中间不能有滑动
        function tap(obj, callback) {
            let flag = false;
            let startTime = 0;
            // 1 严格判断一下dom元素是否存在 并且是一个对象
            if (obj && typeof obj === "object") {
                obj.addEventListener("touchstart", function () {
                    //还原flag
                    flag = false
                    // 当手指按下的时候 计时
                    startTime = Date.now()
                })
                obj.addEventListener("touchmove", function () {
                    flag = true;
                    console.log("阻止tap");
                })
                obj.addEventListener("touchend", function (e) {
                    // console.log('手指离开屏幕啦');
                    if (!flag && (Date.now() - startTime) < 150) {
                        // 这就是一个完整的点按事件
                        // 调用回调函数
                        (typeof callback === "function") && callback.call(obj, e)
                        console.log("tap触发了");
                    }
                })
            }
        }
        // 参考代码
        // oBox.addEventListener('touchstart', function () {
        //     console.log('手指开始触摸啦');
        // })
        // oBox.addEventListener('touchmove', function () {
        //     console.log('手指正在滑动');
        // })
        // oBox.addEventListener('touchend', function () {
        //     console.log('手指离开屏幕啦');
        // })
        // oBox.addEventListener('click', function () {
        //     console.log('点击啦');
        // })
    </script>
</body>
</html>

tap事件封装的更多相关文章

  1. js移动端tap事件封装

    这几天做项目,发现移动端需要触摸事件,而click肯定是不行的,于是我对tap事件封装进行了搜索,找到了一篇文章,原文地址如下:http://www.jb51.net/article/50663.ht ...

  2. Vue 移动端常用tap事件封装

    基于Vue的移动端项目,有些时间原生并没用提供,需要我们自己手动封装,可以封装一些自定义指令来供全局使用. 本文封装了 tap, swipe, swipeleft, swiperight, swipe ...

  3. 移动端WEB开发，click,touch,tap事件浅析

    一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...

  4. 移动端为何不使用click而模拟tap事件及解决方案

    移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...

  5. 移动端click延迟和tap事件

    一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景 由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击 ...

  6. 10行代码搞定移动web端自定义tap事件

    发发牢骚 移动web端里摸爬滚打这么久踩了不少坑,有一定移动web端经验的同学一定被click困扰过.我也不列外.一路走来被虐的不行,fastclick.touchend.iscroll什么的都用过, ...

  7. web开发，click,touch,tap事件浅析

    一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...

  8. HTML5触摸事件演化tap事件

    触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没 ...

  9. tap事件的原理详解

    点击事件延迟问题所在: 在移动端中,由于两次触摸是放大操作,,所以当你点击一次的时候,浏览器会等待300ms,看用户是否会进行第二次点击,如果没有的话,才会执行点击事件 为什么要解决: 随着h5游戏, ...

随机推荐

  1. Error response from daemon: Get https://registry-1.docker.io/v2/library/nginx/manifests/1.14-alpine: Get https://auth.docker.io/token?scope=repository%3Alibrary%2Fnginx%3Apull&service=registry.docker.

    docker pull 镜像时报错: Error response from daemon: Get https://registry-1.docker.io/v2/library/nginx/man ...

  2. AWVS安全渗透扫描

    1.打开软件,点击New Scan 2.在website url中输入被扫描的网址,点击next 3.在scanning profile中选择测试的漏洞类型,默认选择default(默认) 在scan ...

  3. 《深入理解Java虚拟机》-----第9章 类加载及执行子系统的案例与实战

    概述 在Class文件格式与执行引擎这部分中,用户的程序能直接影响的内容并不太多, Class文件以何种格式存储,类型何时加载.如何连接,以及虚拟机如何执行字节码指令等都是由虚拟机直接控制的行为,用户 ...

  4. web项目中登陆超时的功能实现（基于C#）

    当我们登陆进网站后,中途去看别的东西,没有再与该网站的服务器交互,就会弹出一个js窗口,登陆超时请重新登陆,并跳转到登陆页面. 步骤1.实现原理,在web.config中配置session的超时时间, ...

  5. linux下mqtt-client

    CPATH += ../embe_mqtt/MQTTClient/srcPSRTPATH = ../embe_mqtt/MQTTPacket/src LOADPATH += -I$(CPATH)LOA ...

  6. 达孚电子（NDF）参加2019年印度电子元器件展圆满成功

    2019年9月27日-29日,达孚电子(NDF)参加2019年印度国际电子元器件及生产设备展览会在印度国际展览中心举得圆满成功,为期三天的展会中,打造了一场电子元器件行业交流的饕餮盛宴. 本次展会取得 ...

  7. 基础安全术语科普（四）——RFID

    RFID —— Radio Frequency Identification (射频识别技术) 概念:RFID属于一种无源技术(Passive Technology) 使用:生活中RFID无处不在.如 ...

  8. Spring Boot 配置 - 配置信息加密

    ▶ Spring Boot 依赖与配置 Maven 依赖 <dependency> <groupId>org.springframework.boot</groupId& ...

  9. Mybatis和Mysql的Datetime的一些问题

    Mysql的时间类型 时间类型有time, date, datetime, timestamp 如Mysql官方文档所述: time 没有date,date没有time,datetime是date和t ...

  10. 斯坦福机器学习课程 Exercise 习题四

    Exercise 4: Logistic Regression and Newton’s Method 回顾一下线性回归 hθ(x)=θTx Logistic Regression hθ(x)=11+ ...