×

用最简单的代码搞定移动web端自定义tap事件

作者:流泪的石头2017.09.04来源:Web前端之家浏览:536评论:0
关键词:tap移动
微信公众号

微信公众号

在移动端,代码越简单越好,今天教教分享如何用最简单的代码搞定移动web端自定义tap事件。

移动web端里摸爬滚打这么久踩了不少坑,有一定移动web端经验的同学一定被click困扰过。我也不列外。一路走来被虐的不行,fastclick、touchend、iscroll什么的都用过,各有优劣,都不能一步到位。最后实在是被逼无奈,翻阅了不少资料,自定义了一个tap。插件是基于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");
});

实现原理

基于touchstart、touchmove、touchend这三个事件,通过事件委托的方式来实现tap事件。e.target是事件源的触发节点,$(e.target)是该节点的jQuery封装对象, 默认不处理含有disable class的对象。

第一步:监听touchstart事件,事件触发后通过jQuery的data方法设置该对象的isMoved状态为0。
第二步:监听touchmove事件,事件触发后通过jQuery的data方法设置该对象的isMoved状态为1。
第三步:监听touchend事件,事件触发后判断该对象是否touchend过,没有则触发tap事件。

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


温馨提示:本文作者系流泪的石头 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg12312312312312.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    可以的,有什么问题吗?...

  • 访客

    我就试试的...

  • a235

    不能比啊,老外赚钱就是多!...

  • Web前端之家

    备份是必须的,避免麻烦!...

  • a235

    总结得不错,正好用到,提前备份还是最靠谱啊!...

  • Web前端之家

    谢谢支持,请持续关注Web前端之家!...

  • 访客

    文章很棒,做即时通讯也可以试试【GoEasy】这个框架,官网文档详细还提供了各种demo,大大降低了...

  • Web前端之家

    是的,等其他人验证没问题再装吧,总会有第一个吃螃蟹的人,哈哈!!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.1