<!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. Redis实现分布式文件夹锁

    缘起 最近做一个项目,类似某度云盘,另外附加定制功能,本人负责云盘相关功能实现,这个项目跟云盘不同的是,以项目为分配权限的单位,同一个项目及子目录所有有权限的用户可以同时操作所有文件,这样就很容易出现 ...

  2. unittest介绍

    unittest框架是python中一个标准的库中的一个模块,该模块包括许多的类如 test case类.test suit类.texttest runner类.texttest resuite类.t ...

  3. 基于powershell的socks代理

    0x01 前言 在实战中,内网的代理尤其重要,而常见的端口转发被反病毒软件已经盯死,那么学习使用基于powershell的渗透脚本进行代理.端口转发的非常有必要的. 0x02 使用 介绍ithub: ...

  4. PHP 哈夫曼的实现

    <?php namespace Test; use Iterator; use ArrayAccess; use Exception; // 叶子结点或者连接结点的基类 class Huffma ...

  5. JavaScript回调函数和递归函数

    一.回调函数--通过函数的指针来调用函数 把一个函数的指针作为另一个函数的参数,当调用这个参数的时候,这个函数就叫做回调函数 在链式运动上会用到回调函数,之后运动会见到 A.通过指针来调用函数 B.通 ...

  6. ndnsim结果分析

    ndnSIM中提供了几种trace用来对仿真结果进行跟踪,生成数据文件txt 官网地址: https://ndnsim.net/current/metric.html#packet-trace-hel ...

  7. Halcon一日一练：图像分割之基本概念

    1.什么是图像分割: 图像分割就是把图像中特定的目标提出来,进行处理. 2.为什么要做图像分割: 图像分割是由图像处理到图像分析的关键步骤,准确的来说,没有图像分割,图像处理将无法实现其后续的操作.进 ...

  8. opencv::自定义角点检测

    #include <opencv2/opencv.hpp> #include <iostream> #include <math.h> using namespac ...

  9. Linux Centos7 基于Docker 搭建 Nexus私服搭建

    创建Blob Stores[本地文件存储目录,统一管理] 1.设置名称和工作路径: ps[注意事项]: 1.storage name:自定义名称 2.storage path:存储路径,默认[/nex ...

  10. Leetcode（8）字符串转换整数

    Leetcode(8)字符串转换整数 [题目表述]: 请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我 ...