js移动端tap事件封装
这几天做项目,发现移动端需要触摸事件,而click肯定是不行的,于是我对tap事件封装进行了搜索,找到了一篇文章,原文地址如下:http://www.jb51.net/article/50663.htm,
我对其中第一个封装加了一点东西,把它封装在一个函数里面,使用的时候直接调用即可,源代码如下(tap.js):
function tap(ele, fn){
var startTx, startTy;
var endTx, endTy;
ele.addEventListener( 'touchstart', function( e ){
var touches = e.touches[0];
startTx = touches.clientX;
startTy = touches.clientY;
}, false ); ele.addEventListener( 'touchend', function( e ){
var touches = e.changedTouches[0];
endTx = touches.clientX;
endTy = touches.clientY;
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6 ){
fn(e);
}
}, false );
}
使用方法,引入js文件(即tap.js),然后执行如下调用:
/*
参数说明:
ele:原生的dom对象
fn :回调方法,执行你需要的操作
*/ tap(ele,function(e){
//你需要执行的操作
});
js移动端tap事件封装的更多相关文章
- 移动端tap事件(轻击、轻触)
一.问题 ①移动端也有click点击事件,click点击会延迟200~300ms ②因为点击的响应过慢,影响了用户体验,所以需要解决响应慢的问题 二.解决方案 ①使用tap事件:即轻击,轻敲,响应速度 ...
- tap事件封装
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...
- 移动端touch事件封装
<meta charset="utf-8"><meta name="viewport" content="width=device- ...
- Vue 移动端常用tap事件封装
基于Vue的移动端项目,有些时间原生并没用提供,需要我们自己手动封装,可以封装一些自定义指令来供全局使用. 本文封装了 tap, swipe, swipeleft, swiperight, swipe ...
- 移动端tap事件的封装
/*封装tap*/ cc.tap = function(dom,callback){ /* * 要求 没有触发 touchmove 事件 * 并且响应速度要比click快 */ if(dom & ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- 原生js移动端滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- 移动端tap事件,消除300毫秒延迟
引用这个之前,要讲一下首先我是用了webpack技术,所以你的项目如果没有用到这个的话,最好不要用这个技术,当然想用也可以,改下代码也可以用. 下面的代码直接复制就可以用啦. ( function(e ...
- 怎么使用zepto.js的tap事件引起的探索
前言: 在使用zepto.js之前,你首先要知道它是什么?为什么要使用它?以及它和jquery有什么区别? ①:简单来说zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与j ...
随机推荐
- CF Round #353 Div.2
http://codeforces.com/contest/675 A. Infinite Sequence 题意:给出等差数列的首项a以及公差c,问数b是不是该数列中的数,若是输出YES否则输出NO ...
- 如何查看centos系统版本
[root@LAMP1 config]# cat /proc/version Linux version 2.6.32-279.el6.x86_64 (mockbuild@c6b9.bsys.dev. ...
- 关于mac地址的一点感想
因为怕mac地址冲突导致环路影响,所以修改了本地设备的mac地址.地址修改为 77:77:77:00:22:11, 结果导致 wlan0 下发不下来. 查看配置选项/etc/config/wirele ...
- spring @Scheduled 执行2次
今天遇到定时任务Scheduled 执行2次的情况,做一个简单的记录. 网上有好多办法,我几乎都试了一遍,我的情况下面的办法可用. 1. autodeploy属性值设置为false,如果此项设为tru ...
- 构建maven的web项目时注意的问题
构建项目后或者导入项目后,我们需要bulid path--->config build path 特别是maven的依赖一定要 发布到WEB_INF的lib下面,不然在发布项目的时候,这些依赖都 ...
- 【ubuntu】开机启动
背景 在ubuntu下做开发,虚拟机要经常开启和关闭,重要的进程需要随机自启,非重要的可以手工启动.比如nginx就需要自启,confluence就没那么重要了. 为了控制哪些程序要自启,哪些程序不要 ...
- 灾情巡视C语言代码
/*"水灾巡视问题"模拟退火算法.这是一个推销员问题,本题有53个点,所有可能性大约为exp(53),目前没有好方法求出精确解,既然求不出精确解,我们使用模拟退火法求出一个较优解, ...
- drupal7 sql接口笔记
1.查询: execute() ->fetch():从结果集中取出一行作为一个对象 execute() ->fetchField():获取单个值 execute() ->fetchA ...
- 重读The C programming Lanuage 笔记四:c预处理
C预处理器执行宏替换.条件编译以及包含指定的文件.以#开头的命令行就是与处理器的对象.这些命令行的语法独立于语言的其他部分,它们可以出现在任何地方,其作用可延续到所在编译单元的末尾(与作用域无关).行 ...
- jquery validate扩展验证方法
/***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...