发发牢骚

移动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. [Unity Editor]10行代码搞定Hierarchy排序

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

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

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

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

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

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

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

  5. 7行代码搞定WEB服务

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

  6. Tensorflow快餐教程(1) - 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. mysql connection不断增加

    程序运行以后,刷新页面,在mysql的status里面检测到Threads_connected的值不断上升. 对程序断点调试,发现,是由于下面的代码导致. class ConnectionMySQL( ...

  2. 用ADO操作数据库的方法步骤

    用ADO操作数据库的方法步骤 学习ADO时总结的一些经验 - 技术成就梦想 - 51CTO技术博客 http://freetoskey.blog.51cto.com/1355382/989218   ...

  3. python使用sqlalchemy连接pymysql数据库

    python使用sqlalchemy连接mysql数据库 字数833 阅读461 评论0 喜欢1 sqlalchemy是python当中比较出名的orm程序. 什么是orm? orm英文全称objec ...

  4. CocoaPods的 安装 /卸载/升级

    CocoaPods用来管理第三方框架 Mac 安装 Cocoapods 导引如果你的 Mac OSX 升级到 10.11.x+, 并且需要安装 Cocoapods, 可以参考本博客.安装 rubyMa ...

  5. thinkphp5.0开发规范

    命名规范 ThinkPHP5遵循PSR-2命名规范和PSR-4自动加载规范,并且注意如下规范: 目录和文件 目录不强制规范,驼峰及小写+下划线模式均支持: 类库.函数文件统一以.php为后缀: 类的文 ...

  6. poj_3321 线段树/树状数组

    题目大意 一个果树(每个节点的分叉数目不固定)上有N个分叉点(包括最末的叶节点),则有N-1条边,将分叉点进行从1到N编号,每个分叉点上均可以结水果.开始的时候,每个分叉点都有一个水果,之后进行一系列 ...

  7. LeetCode——Single Number III

    Description: Given an array of numbers nums, in which exactly two elements appear only once and all ...

  8. 运行npm install出现警告

    如下: 解决: fsevent是mac osx系统的,你是在win或者Linux下使用了 所以会有警告,忽略即可

  9. Windows Phone 有关独立存储(一)

    private const string foldername = "temp1"; private const string filename = foldername + &q ...

  10. shell批量重命令文件脚本

    批量重命名脚步记录,以备用 假如有一批11.txt 12.txt 13,txt 14.txt 15.txt脚步要要重命名为1.txt 2.txt 3.txt .... 脚本如下: #!/bin/bas ...