发发牢骚
移动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事件的更多相关文章
-
[Unity Editor]10行代码搞定Hierarchy排序
在日常的工作和研究中,当给我们的场景摆放过多的物件的时候,Hierarchy面板就会变得杂乱不堪.比如这样: 过多的层次结构充斥在里面,根层的物件毫无序列可言,整个层次面板显示非常的杂乱不堪,如 ...
-
如何用Python统计《论语》中每个字的出现次数?10行代码搞定--用计算机学国学
编者按: 上学时听过山师王志民先生一场讲座,说每个人不论干什么,都应该学习国学(原谅我学了计算机专业)!王先生讲得很是吸引我这个工科男,可能比我的后来的那些同学听课还要认真些,当然一方面是兴趣.一方面 ...
-
IOS . -转载-10行代码搞定九宫格
//每个Item宽高 CGFloat W = ; CGFloat H = ; //每行列数 NSInteger rank = ; //每列间距 CGFloat rankMargin = (self.v ...
-
30行代码搞定WCF并发性能测试
[以下只是个人观点,欢迎交流] 30行代码搞定WCF并发性能 轻量级测试. 1. 调用并发测试接口 static void Main() { List< ...
-
7行代码搞定WEB服务
作为一个 Java 程序猿,写代码久了,各种技术也就都尝试了一个遍. 先从 SSH1(Spring.Struts1.Hibernate)摸爬滚打转变到 SSH2(Spring.Struts2.Hibe ...
-
Tensorflow快餐教程(1) - 30行代码搞定手写识别
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/lusing/article/details ...
-
当小程序遇见物联网IoT,几行代码搞定智能插座控制
在 5G 热潮的推动下,与其紧密结合的物联网(IoT)正日益成为个人和企业工作生活中的重要组成部分,它为企业和个人带来了操作流程的改进和更好的生活体验,随着人工智能(AI)技术的日趋成熟,IoT 与 ...
-
BaseHttpListActivity,几行代码搞定Android Http列表请求、加载和缓存
Android开发中,向服务器请求一个列表并显示是非常常见的需求,但实现起来比较麻烦,代码繁杂. 随着应用的更新迭代,这种需求越来越多,我渐渐发现了实现这种需求的代码的共同点. 于是我将Activit ...
-
python爬煎蛋妹子图--20多行代码搞定煎蛋妹子图库
如果说一个人够无聊的话... 就会做一些十分美(wei)丽(suo)的事情啦哈哈哈... 好的,话不多说,进入正题. 正如标题所示,我们今天的目标很简单: 代码要少,妹子要好. 步骤如下: 1. 首先 ...
随机推荐
-
XML介绍
XML [TOC] 1.XML简介 XML是Extend Markup Langue可扩展标签语言,标签由开发着自己定义 作用是: 1.描述带关系的数据(作为软件的配置文件):包含与被包含的关系 2. ...
-
js生成随即字符串
js生成随即字符串 /* *js生成随即字符串原来如此简单 *toString() radix argument must be between 2 and 36 */ function uuid() ...
-
基于SSH2框架Struts2拦截器的登录验证实现(转)
大象在这里假设你已经弄清楚了Struts2拦截器的基本概念,可以进入实际运用了.那么我们在之前的基础上只需要做下小小的改变,就可以使用Struts2的拦截器机制实现登录的验证. 修改数 ...
-
Poj OpenJudge 百练 1860 Currency Exchang
1.Link: http://poj.org/problem?id=1860 http://bailian.openjudge.cn/practice/1860 2.Content: Currency ...
-
js数组反转
var _li = test.getElementsByTagName("li"), arrayObj = [].slice.apply(_li),//_li用apply调用sli ...
-
你好,C++(38)从问题描述中发现对象的属性和行为 6.4 工资程序成长记:类与对象(上)
6.4 工资程序成长记:类与对象 “夜半三更哟,盼天明:寒冬腊月哟,盼春风.若要盼得哟,涨工资,岭上……”自从上次老板许诺给小陈涨工资以后,一转眼又过去几个月了,可是涨工资的事一点动静都没有.小陈只 ...
-
网站开发进阶(三十七)JSP页面跳转问题解决
JSP页面跳转问题解决 PS:本篇博文质量欠佳,仅供个人学习之用. 前言 在做Web开发时,对别人的应用(jsp+servlet)进行服务器部署时出现了页面跳转无效的情况.但是项目在本地未出现此状况. ...
-
Spring batch
学习了解 https://www.ibm.com/developerworks/cn/java/j-lo-springbatch1/index.html?ca=drs-#ibm-pcon
-
MySQL中Checkpoint技术
个人读书笔记,详情参考<MySQL技术内幕 Innodb存储引擎> 1,checkpoint产生的背景数据库在发生增删查改操作的时候,都是先在buffer pool中完成的,为了提高事物操 ...
-
【Mac】Finder显示或隐藏文件
第一步:打开「终端」应用程序. 第二步:输入如下命令: defaults write com.apple.finder AppleShowAllFiles -boolean true ; killal ...