<!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. 代码审计-phpcms9.6.2任意文件下载漏洞

    漏洞文件: phpcms\modules\content\down.php 1.在download函数中对文件的校验部分 首先 if(preg_match('/(php|phtml|php3|php4 ...

  2. [Tyvj Jan]青蛙跳荷叶

    题目限制 时间限制 内存限制 评测方式 题目来源 1000ms 131072KiB 标准比较器 Local 题目描述 从前,有一个小青蛙决定去荷叶上练习跳跃.现在有n个荷叶排成一排,小青蛙一开始在最左 ...

  3. 造轮子了！NETCore跨平台UI框架，CPF

    CPF(暂时命名)(Cross platform framework),模仿WPF的框架,支持NETCore的跨平台UI框架,暂时不够完善,只用于测试,暂时只支持Windows和Mac.支持数据绑定, ...

  4. Mysql面试题及千万级数据查询优化

    今天在说Mysql查询优化之前,我先说一个常见的面试题,并带着问题深入探讨研究.这样会让大家有更深入的理解. 一,Mysql数据库中一个表里有一千多万条数据,怎么快速的查出第900万条后的100条数据 ...

  5. React + MobX 状态管理入门及实例

    前言 现在最热门的前端框架,毫无疑问是React. React是一个状态机,由开始的初始状态,通过与用户的互动,导致状态变化,从而重新渲染UI. 对于小型应用,引入状态管理库是"奢侈的&qu ...

  6. 07 python学习笔记-写一个清理日志的小程序（七）

    #删掉三天前的日志 #1.获取到所有的日志文件, os.walk #2.获取文件时间 android 2019-09-27 log,并转成时间戳 #3.获取3天前的时间 time.time() - 6 ...

  7. SpringBoot学习（三）探究Springboot自动装配

    目录 什么是自动装配 何时自动装配 原理分析 注:以下展示的代码springboot的版本为2.0.3版.因源码过长,大家选择展开代码 ㄟ( ▔, ▔ )ㄏ 什么是自动装配 自动装配还是利用了Spri ...

  8. unity基础命令

    获取所挂脚本元素的组件: rd = GetComponent<Rigidbody>(); 获取其他元素的组件: rd = GameObject.Find("Player" ...

  9. hash算法的应用

    一.单词模式匹配 描述:单词模式字符串为“一二二一”,目标字符串为"苹果 香蕉 香蕉 苹果"则匹配成功 a=[1,2,2,1,1,3] b=['x','y','y','x','x' ...

  10. 【从刷面试题到构建知识体系】Java底层-synchronized锁-2偏向锁篇

    上一篇通过构建金字塔结构,来从不同的角度,由浅入深的对synchronized关键字做了介绍, 快速跳转:https://www.cnblogs.com/xyang/p/11631866.html 本 ...