这几天做项目,发现移动端需要触摸事件,而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. hdu 3507 Print Article(斜率优化DP)

    题目链接:hdu 3507 Print Article 题意: 每个字有一个值,现在让你分成k段打印,每段打印需要消耗的值用那个公式计算,现在让你求最小值 题解: 设dp[i]表示前i个字符需要消耗的 ...

  2. Dev的GridControl控件选择框的使用

    先介绍环境:VS2010,dev11.2 想要达到的效果:,当单击某一行时前面的选择框选中. 在网上找了不少,但是感觉跟我想的做法很不一样(有很多都是再另外添加一个什么CheckBox,这个我在Dev ...

  3. 在mac安装numpy matplotlib scipy

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #fffff ...

  4. Mac下如何使用Vim

    帖子是转载的,原帖地址 Mac OX其实已经默认装好了vim了.不需要再安装Macvim https://ruby-china.org/topics/4905 Mac开发利器之程序员编辑器MacVim ...

  5. 关于UI_USER_INTERFACE_IDIOM() & UIDevice.model

    使用 UI_USER_INTERFACE_IDIOM() 进行区分 (ios 3.2 >=) 无法区分iphone和ipod if (UI_USER_INTERFACE_IDIOM() == U ...

  6. java中float和double的区别

    float表示单精度浮点数在机内占4个字节,用32位二进制描述. double表示双精度浮点数在机内占8个字节,用64位二进制描述.浮点数在机内用指数型式表示,分解为:数符,尾数,指数符,指数四部分. ...

  7. HTML canvas图像裁剪

    canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...

  8. CreateProcess函数诡异的表现

    场景:程序A使用CreateProcess函数去启动另一个程序(.exe)文件,在绝大部分情况下是可以成功启动的,但是在某些电脑上无效. 因为这“某些电脑”实在不好找,终于有一天借到一台这样的电脑. ...

  9. JS算法与数据结构之八皇后(晕晕)

    算法核心思想 回溯算法 递归实现 程序实现 坐标系 循环递归 回溯 计数 收集位置 特效添加 <!DOCTYPE HTML> <html> <head> <m ...

  10. 中小型公司数据仓库搭建——以mysql为例

    为了方便公司的数据分析平台的独立运行和数据挖掘的探索,今年上半年在公司搭建了支持数据平台和数据挖掘的数据仓库:现就数据仓库的创建工作总结如下,供大家参考: 首先介绍下数据仓库搭建的缘由: 公司创建两年 ...