首页 > 代码库 > 10行代码搞定移动web端自定义tap事件
10行代码搞定移动web端自定义tap事件
发发牢骚
移动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事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。