<!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. 单引号、双引号与定界符——PHP

    单引号与双引号 单引号和双引号在echo输出时的区别 echo输出时,如果使用单引号,那么echo会把单引号之间的全部内容当成普通字符串输出,不能识别变量和转义字符(单引号串中的内容总被认为是普通字符 ...

  2. php 加入 unless 语法

    1. php 的版本 :PHP 7.3.0-dev (cli) (built: Mar 18 2018 00:28:55) ( NTS ) 2. unless 语法结构: unless($cond){ ...

  3. [BZOJ29957] 楼房重建 - 线段树

    2957: 楼房重建 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 3294  Solved: 1554[Submit][Status][Discus ...

  4. 图像处理笔记（二十一）：halcon在图像处理中的运用

    概要: 分水岭算法做图像分割 二维码识别 稍后将其他几篇笔记全都补充上概要方便查询. 分水岭算法做图像分割 使用距离变换结合分水岭算法实现图像分割,可以用来分割仅通过阈值分割还是有边缘连接在一起的情况 ...

  5. Java类型信息（RTTI和反射）

    要想在IT领域站得住脚,必须得不断地学习来强化自己,但是学过的技术不实践很容易便被遗忘,所以一直都打算开个博客,来记录自己学的知识,另外也可以分享给有需要的人! 最近在学习反射,为了更好地理解反射,就 ...

  6. dubbo初学采坑记

    写在前面的话 dubbo 现在是apache组织旗下的项目,相信国内也有很多人使用.最近一个同事离职,我就接手了他的项目.远程通讯就是用的dubbo框架来实现的.使用Intelij idea 写了一个 ...

  7. Django 从零开始

    Django在Python的web开发框架中属于重量级的框架,功能多而全,但是相对的体积和坑也会比较多,但是其实学习Python的web开发个人觉得Django其实会比Flask好上手,特别是0基础的 ...

  8. SQLServer执行大脚本文件时，提示“无法执行脚本没有足够的内存继续执行程序 (mscorlib)”

    问题描述: 有时候服务器操作导入数据.sql,或者 当需求不可以直接备份整库还原时,往往通过导出数据库脚本的方式来部署-还原数据库表 但是当数据库导出脚本很大,用Microsoft SQL Serve ...

  9. （七）javac编译

    文章目录 1.基本格式 2.目标路径 2.1 缺省项 2.2 指定路径 2.2.1 全路径 2.2.2 相对路径 3.源文件 3.1 无第三方库 3.1.1 基本方法 3.1.2 添加目录 3.1.3 ...

  10. vue事件双向绑定

    事件 案例: vue的事件绑定原理:改变图片的背景颜色问题来实现这个框架的使用方法, new Vue({ el:"", data:{}, methord:{}, computed: ...