这几天做项目,发现移动端需要触摸事件,而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事件封装的更多相关文章

  1. 移动端tap事件(轻击、轻触)

    一.问题 ①移动端也有click点击事件,click点击会延迟200~300ms ②因为点击的响应过慢,影响了用户体验,所以需要解决响应慢的问题 二.解决方案 ①使用tap事件:即轻击,轻敲,响应速度 ...

  2. tap事件封装

    <!DOCTYPE html> <html lang="zh"> <head>     <meta charset="UTF-8 ...

  3. 移动端touch事件封装

    <meta charset="utf-8"><meta name="viewport" content="width=device- ...

  4. Vue 移动端常用tap事件封装

    基于Vue的移动端项目,有些时间原生并没用提供,需要我们自己手动封装,可以封装一些自定义指令来供全局使用. 本文封装了 tap, swipe, swipeleft, swiperight, swipe ...

  5. 移动端tap事件的封装

    /*封装tap*/ cc.tap = function(dom,callback){ /* * 要求 没有触发 touchmove 事件 * 并且响应速度要比click快 */ if(dom & ...

  6. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  7. 原生js移动端滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  8. 移动端tap事件,消除300毫秒延迟

    引用这个之前,要讲一下首先我是用了webpack技术,所以你的项目如果没有用到这个的话,最好不要用这个技术,当然想用也可以,改下代码也可以用. 下面的代码直接复制就可以用啦. ( function(e ...

  9. 怎么使用zepto.js的tap事件引起的探索

    前言:   在使用zepto.js之前,你首先要知道它是什么?为什么要使用它?以及它和jquery有什么区别? ①:简单来说zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与j ...

随机推荐

  1. Python学习笔记——进阶篇【第九周】———线程、进程、协程篇(队列Queue和生产者消费者模型)

    Python之路,进程.线程.协程篇 本节内容 进程.与线程区别 cpu运行原理 python GIL全局解释器锁 线程 语法 join 线程锁之Lock\Rlock\信号量 将线程变为守护进程 Ev ...

  2. PL SQL Developer报错框乱码

    在系统变量里设置 变量名:NLS_LANG 变量值设为:SIMPLIFIED CHINESE_CHINA.ZHS16GBK

  3. Office下载地址

    文件名cn_office_professional_plus_2016_x86_x64_dvd_6969182.isoSHA1277926A41B472EE38CA0B36ED8F2696356DCC ...

  4. [SOJ]连通性问题

    Description 关系R具有对称性和传递性.数对p q表示pRq,p和q是0或自然数,p不等于q.要求写一个程序将数对序列进行过滤,如果一个数对可以通过前面数对的传递性得到,则将其滤去.例如:输 ...

  5. <hdu-2032>杨辉三角

    这是杭电hdu上杨辉三角的链接:http://acm.hdu.edu.cn/showproblem.php?pid=2032  Problem Description: 还记得中学时候学过的杨辉三角吗 ...

  6. scala 访问权限详解

    private/protected [包名/类名/this] 即可指定变量的作用域.(this代表只有当前实例(即对象)可以访问) 伴生类和伴生对象中的成员可以相互访问. class PackageO ...

  7. VMware下安装CentOS6.5

    一.工具 1.VMware-workstation-full-12.5.0-4352439.exe 2.CentOS-6.5-x86_64-minimal.iso 二.安装VMware虚拟机 1.选择 ...

  8. 李明杰的视频和李明杰的博客是学习OC的基础

    http://www.cocoachina.com/bbs/read.php?tid=196664

  9. Oralce生成前N年的年数据

    今天做一个统计报表的时候正好碰到这个问题,原来,一般是通过后台代码来生成.现在直接通过oracle来生成,记录一下. 方法一: SELECT YEAR FROM ( , UNION SELECT TO ...

  10. 汉字转全拼音函数优化方案(SQLServer),值得你看看

    函数要求实现功能 select 函数名 ('你好,我是追索') 返回的结果(ni hao , wo shi zhui suo) 解决方案一: 解决方案一 /* 根据汉字获取全拼 1.生成所有读音临时表 ...