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

时间：2022-06-13 04:12:26

发发牢骚

移动web端里摸爬滚打这么久踩了不少坑，有一定移动web端经验的同学一定被click困扰过。我也不列外。一路走来被虐的不行，fastclick、touchend、iscroll什么的都用过，各有优劣，都不能一步到位。最后实在是被逼无奈，翻阅了不少资料，自定义了一个tap。

效果预览

废话不多说先上效果 移动端预览

一探真假

真的只有10行

插件是基于jQuery的，上代码。

//自定义tap

$(document).on("touchstart", function(e) {

    if(!$(e.target).hasClass("disable")) $(e.target).data("isMoved", 0);

});

$(document).on("touchmove", function(e) {

    if(!$(e.target).hasClass("disable")) $(e.target).data("isMoved", 1);

});

$(document).on("touchend", function(e) {

    if(!$(e.target).hasClass("disable") && $(e.target).data("isMoved") == 0) $(e.target).trigger("tap");

});

既然说是10行代码搞定，那么就一定是10行。

实现原理

基于touchstart、touchmove、touchend这三个事件，通过事件委托的方式来实现tap事件。

e.target是事件源的触发节点，$(e.target)是该节点的jQuery封装对象。

第一步：监听touchstart事件，事件触发后通过jQuery的data方法设置该对象的isMoved状态为0。

第二步：监听touchmove事件，事件触发后通过jQuery的data方法设置该对象的isMoved状态为1。

第三步：监听touchend事件，事件触发后判断该对象是否touchend过，没有则触发tap事件。

使用方法

把上面的10行代码放在jQuery或者zepto的最后面，用法和一般事件一样

其他

目前还没有做PC端的兼容，移动web端的机型测试做的不够多，后续会慢慢补上。如果在使用中遇到了什么问题可以留言。

    <!doctype html>

<html lang="zh-cn">

<head>

    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">

    <title>tap</title>

    <script id="jquery_180" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.0.min.js"></script>

</head>

<body>

<div class="layer1">

    <div class="layer2">

        <div class="layer3">

        </div>

    </div>

</div>

<div class="window">

</div>

</body>

</html>

        <style>.layer1 {

        width: 100%;

        height: 200px;

        background-color: #888;

    }

    .layer2 {

        width: 67%;

        height: 67%;

        background-color: #aaa;

    }

    .layer3 {

        width: 67%;

        height: 67%;

        background-color: #ccc;

    }

    .window {

        position: fixed;

        top: 50px;

        left: 10%;

        width: 80%;

        height: 200px;

        background-color: #099;

    }</style>

                <script>$(function () {

        //自定义tap

        $(document).on("touchstart", function(e) {

            var $target = $(e.target);

            if(!$target.hasClass("disable")) $target.data("isMoved", 0);

        });

        $(document).on("touchmove", function(e) {

            var $target = $(e.target);

            if(!$target.hasClass("disable")) $target.data("isMoved", 1);

        });

        $(document).on("touchend", function(e) {

            var $target = $(e.target);

            if(!$target.hasClass("disable") && $target.data("isMoved") == 0) $target.trigger("tap");

        });

        $(".layer1").on("tap", function(e) {

            alert("layer1");

        });

        $(".layer2").on("tap", function(e) {

            alert("layer2");

            e.stopPropagation();

        });

        $(".layer3").on("tap", function(e) {

            alert("layer3");

            e.stopPropagation();

        });

        $(".window").on("tap", function(e) {

            alert("window");

        });

    });</script>

<!-- Generated by RunJS (Thu Sep 01 11:54:18 CST 2016) 0ms -->

10行代码搞定移动web端自定义tap事件的更多相关文章

  1. &lbrack;Unity Editor&rsqb;10行代码搞定Hierarchy排序

    在日常的工作和研究中,当给我们的场景摆放过多的物件的时候,Hierarchy面板就会变得杂乱不堪.比如这样:    过多的层次结构充斥在里面,根层的物件毫无序列可言,整个层次面板显示非常的杂乱不堪,如 ...

  2. 如何用Python统计《论语》中每个字的出现次数？10行代码搞定--用计算机学国学

    编者按: 上学时听过山师王志民先生一场讲座,说每个人不论干什么,都应该学习国学(原谅我学了计算机专业)!王先生讲得很是吸引我这个工科男,可能比我的后来的那些同学听课还要认真些,当然一方面是兴趣.一方面 ...

  3. IOS &period; -转载-10行代码搞定九宫格

    //每个Item宽高 CGFloat W = ; CGFloat H = ; //每行列数 NSInteger rank = ; //每列间距 CGFloat rankMargin = (self.v ...

  4. 30行代码搞定WCF并发性能测试

    [以下只是个人观点,欢迎交流] 30行代码搞定WCF并发性能 轻量级测试. 1. 调用并发测试接口 static void Main()         {               List&lt ...

  5. 7行代码搞定WEB服务

    作为一个 Java 程序猿,写代码久了,各种技术也就都尝试了一个遍. 先从 SSH1(Spring.Struts1.Hibernate)摸爬滚打转变到 SSH2(Spring.Struts2.Hibe ...

  6. Tensorflow快餐教程&lpar;1&rpar; - 30行代码搞定手写识别

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/lusing/article/details ...

  7. 当小程序遇见物联网IoT，几行代码搞定智能插座控制

    在 5G 热潮的推动下,与其紧密结合的物联网(IoT)正日益成为个人和企业工作生活中的重要组成部分,它为企业和个人带来了操作流程的改进和更好的生活体验,随着人工智能(AI)技术的日趋成熟,IoT 与 ...

  8. BaseHttpListActivity，几行代码搞定Android Http列表请求、加载和缓存

    Android开发中,向服务器请求一个列表并显示是非常常见的需求,但实现起来比较麻烦,代码繁杂. 随着应用的更新迭代,这种需求越来越多,我渐渐发现了实现这种需求的代码的共同点. 于是我将Activit ...

  9. python爬煎蛋妹子图--20多行代码搞定煎蛋妹子图库

    如果说一个人够无聊的话... 就会做一些十分美(wei)丽(suo)的事情啦哈哈哈... 好的,话不多说,进入正题. 正如标题所示,我们今天的目标很简单: 代码要少,妹子要好. 步骤如下: 1. 首先 ...

随机推荐

  1. XML介绍

    XML [TOC] 1.XML简介 XML是Extend Markup Langue可扩展标签语言,标签由开发着自己定义 作用是: 1.描述带关系的数据(作为软件的配置文件):包含与被包含的关系 2. ...

  2. js生成随即字符串

    js生成随即字符串 /* *js生成随即字符串原来如此简单 *toString() radix argument must be between 2 and 36 */ function uuid() ...

  3. 基于SSH2框架Struts2拦截器的登录验证实现&lpar;转&rpar;

        大象在这里假设你已经弄清楚了Struts2拦截器的基本概念,可以进入实际运用了.那么我们在之前的基础上只需要做下小小的改变,就可以使用Struts2的拦截器机制实现登录的验证.     修改数 ...

  4. Poj OpenJudge 百练 1860 Currency Exchang

    1.Link: http://poj.org/problem?id=1860 http://bailian.openjudge.cn/practice/1860 2.Content: Currency ...

  5. js数组反转

    var _li = test.getElementsByTagName("li"), arrayObj = [].slice.apply(_li),//_li用apply调用sli ...

  6. 你好，C&plus;&plus;（38）从问题描述中发现对象的属性和行为 6&period;4 工资程序成长记：类与对象（上）

    6.4  工资程序成长记:类与对象 “夜半三更哟,盼天明:寒冬腊月哟,盼春风.若要盼得哟,涨工资,岭上……”自从上次老板许诺给小陈涨工资以后,一转眼又过去几个月了,可是涨工资的事一点动静都没有.小陈只 ...

  7. 网站开发进阶&lpar;三十七&rpar;JSP页面跳转问题解决

    JSP页面跳转问题解决 PS:本篇博文质量欠佳,仅供个人学习之用. 前言 在做Web开发时,对别人的应用(jsp+servlet)进行服务器部署时出现了页面跳转无效的情况.但是项目在本地未出现此状况. ...

  8. Spring batch

    学习了解 https://www.ibm.com/developerworks/cn/java/j-lo-springbatch1/index.html?ca=drs-#ibm-pcon

  9. MySQL中Checkpoint技术

    个人读书笔记,详情参考<MySQL技术内幕 Innodb存储引擎> 1,checkpoint产生的背景数据库在发生增删查改操作的时候,都是先在buffer pool中完成的,为了提高事物操 ...

  10. 【Mac】Finder显示或隐藏文件

    第一步:打开「终端」应用程序. 第二步:输入如下命令: defaults write com.apple.finder AppleShowAllFiles -boolean true ; killal ...

相关文章