<!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. docker的使用 一容器命令

    Docker容器命令 前提 执行容器的前提是有镜像 . #创建并启动容器 docker run [options] images [command][args] // option 的说明 --nam ...

  2. Centos7安装moloch步骤

      Centos7安装moloch步骤 Moloch 是一个由AOL开源的,能够大规模的捕获IPv4数据包(PCAP).索引和数据库系统,由以下三个部分组成: capture :绑定interface ...

  3. opencv::两张图片的线性融合

    理论-线性混合操作 g(x) 表示 融合图片中的像素点,f0(x) 和 f1(x) 分别表示背景和前景图片中的像素点. //参数1:输入图像Mat – src1 //参数2:输入图像src1的alph ...

  4. Mybatis源码阅读 之 玩转Executor

    承接上篇博客, 本文探究MyBatis中的Executor, 如下图: 是Executor体系图 本片博客的目的就是探究如上图中从顶级接口Executor中拓展出来的各个子执行器的功能,以及进一步了解 ...

  5. java 链接mysql

    import java.sql.*; public class ConnectSql { static final String JDBC_DRIVER = "com.mysql.jdbc. ...

  6. 02 Node.js学习笔记之http服务

    在Node中可以非常轻松的构建一个Web服务器,在Node中提供了一个http模块,这个模块主要功能就是帮助你创建一个Web服务器. 创建步骤: //1.加载http模块 var http=requi ...

  7. SpringBoot 开发案例之参数传递的正确姿势

    前言 开发这么多年,肯定还有不少小伙伴搞不清各种类型的参数是如何传递的,很多同学都是拿来即用,复制粘贴一把撸,遇到问题还是一脸懵逼. 姿势 学习参数传递的正确姿势,先说怎么做,再说为什么,本质上还是复 ...

  8. Android SDK安装与环境变量的配置(windows系统)

    (一)下载Android SDK压缩包 解压后即可(全英文路径,以免后续出现乱码) (1)下载地址:http://tools.android-studio.org/index.php/sdk

  9. windows设置本地域名解析

    1.首先找到host文件:C:\Windows\System32\drivers\etc 2.打开host文件: # Copyright (c) 1993-2009 Microsoft Corp. # ...

  10. deepin15.5 安装tensorflow-gpu

    deepin的CUDA和cuDNN安装方法与其它系统有所不同,参考其它操作系统的方法也许不适用,特别是显卡驱动的安装,容易使系统出现问题 本次配置: 操作系统:deepin15.5桌面版 电脑品牌:联 ...