最近闲来无事,写了个移动端的事件库,代码贴在下面,大家勿拍。

 /**
@version 1.0.0
@author gangli
@deprecated 移动端触摸事件库
*/
(function () {
"use strict";
var util = {
$: function (selector) {
return document.querySelector(selector);
},
getEventInfo: function (e) {
var _e = {};
_e.pageX = e.changedTouches[0].pageX;
_e.pageY = e.changedTouches[0].pageY;
_e.target = e.target;
return _e;
}
};
var _tap = function (callback) {
this.addEventListener('touchstart', function (e) {
var _e = util.getEventInfo(e);
_e.type = 'tap';
callback.call(this, _e);
}, false);
};
var _longtap = function (callback) {
var interval = 800 , s , e , timer , el;
this.addEventListener('touchstart', function (e) {
var _e = util.getEventInfo(e);
el = _e.target;
s = Date.now();
timer = setTimeout(function () {
_e.type = 'longtap';
callback.call(el, _e);
}, interval);
}, false);
this.addEventListener('touchend', function (e) {
clearTimeout(timer);
}, false);
};
var _swipe = function (callback) {
var s = {}, e = {}, d = {}, distance = 50,
angle = 0,
type;
this.addEventListener('touchstart', function (evt) {
var _e = util.getEventInfo(evt);
s.x = _e.pageX;
s.y = _e.pageY;
evt.preventDefault();
}, false);
this.addEventListener('touchend', function (evt) {
var _e = util.getEventInfo(evt);
e.x = _e.pageX;
e.y = _e.pageY;
d.x = e.x - s.x;
d.y = e.y - s.y;
if (Math.abs(d.x) < distance && Math.abs(d.y) < distance) return false;
angle = Math.abs(Math.atan((e.y - s.y) / (e.x - s.x)) / Math.PI * 180);
if (angle > 45) {
type = d.y < 0 ? 'swipe-up' : 'swipe-down';
} else {
type = d.x < 0 ? 'swipe-left' : 'swipe-right';
}
callback.call(this, {
type: type,
start: s,
end: e,
distance: d,
target: _e.target
});
evt.preventDefault();
}, false);
}
var _drag = function (callback) {
var dragStart = false, s = {}, e = {}, o = {};
this.addEventListener('touchstart', function (evt) {
dragStart = true;
var _e = util.getEventInfo(evt);
s.x = _e.pageX;
s.y = _e.pageY;
evt.preventDefault();
}, false);
this.addEventListener('touchmove', function (evt) {
if (!dragStart) return;
var _e = util.getEventInfo(evt);
o.x = _e.pageX - s.x;
o.y = _e.pageY - s.y;
callback.call(this, {
type: "drag-move",
start: s,
offset: o,
target: _e.target
});
}, false);
this.addEventListener('touchend', function (evt) {
dragStart = false;
var _e = util.getEventInfo(evt);
e.x = _e.pageX;
e.y = _e.pageY;
callback.call(this, {
type: "drag-end",
start: s,
offset: o,
end: e,
target: _e.target
});
}, false);
}
var eventMap = {
tap: _tap,
swipe: _swipe,
longtap: _longtap,
drag: _drag
}
var ktouch = {
ver: '1.0.0',
on: function (el, type, fn) {
try {
var el = util.$(el);
eventMap[type].call(el, fn);
return this;
} catch (e) {
console.error('type error : %s is not allowed', type);
}
}
}
window.ktouch = ktouch;
})();

github网址:https://github.com/kbqncf/ktouch

ktouch移动端事件库的更多相关文章

  1. cocos2d-x开发:服务端基础库封装

    元旦前面几天都在忙着面试,随后的几天也就一直在做服务端基础库开发方面的工作.对于服务端开发,是很久之前的事情了.那时候我还在大学读书,一直都是在倒腾服务端开发方面的东西,毕业后参加公司工作就是一直从事 ...

  2. touch.js - 移动设备上的手势识别与事件库

    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...

  3. 利用epoll写一个"迷你"的网络事件库

    epoll是linux下高性能的IO复用技术,是Linux下多路复用IO接口select/poll的增强版本,它能显著提高程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率.另一点原因就是获取 ...

  4. Yarn的服务库和事件库使用方法

    事件类型定义: package org.apache.hadoop.event; public enum JobEventType { JOB_KILL, JOB_INIT, JOB_START } ...

  5. Threejs 的场景查看 - 几个交互事件库助你方便查看场景

    Threejs 的场景查看 - 几个交互事件库助你方便查看场景 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...

  6. 服务端事件EventSource揭秘

    服务端推 服务端推,指的是由服务器主动的向客户端发送消息(响应).在应用层的HTTP协议实现中,"请求-响应"是一个round trip,它的起点来自客户端,因此在应用层之上无法实 ...

  7. Hadoop服务库与事件库的使用及其工作流程

    Hadoop服务库与事件库的使用及其工作流程   Hadoop服务库: YARN采用了基于服务的对象管理模型,主要特点有: 被服务化的对象分4个状态:NOTINITED,INITED,STARTED, ...

  8. Hadoop2源码分析-YARN 的服务库和事件库

    1.概述 在<Hadoop2源码分析-YARN RPC 示例介绍>一文当中,给大家介绍了YARN 的 RPC 机制,以及相关代码的演示,今天我们继续去学习 YARN 的服务库和事件库,分享 ...

  9. 值得收藏的8个Web端组件库

    值得收藏的8个Web端组件库 Ant Design 介绍:一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验. 组件库地址:https: ...

随机推荐

  1. Jenkins/CCNET发送邮件策略和注意事项,以及邮箱类型的选择

    QQ邮箱永远也不要用,原因:安全机制太强导致在CCNET/Jenkins中极难配置,且反垃圾太强,有些项目会涉及到敏感词一样屏蔽,如果发邮件找客服求助时,基本是无果. 如果在免费领域,推荐使用免费企业 ...

  2. CSS中的a标签几个访问状态记录

    a:link {color: #FF0000}     /* 未访问的链接 */a:visited {color: #00FF00}  /* 已访问的链接 */a:hover {color: #FF0 ...

  3. 虚拟机:Python虚拟机的基本了解

    探索某个东西,我们需要知道这个东西是用来干什么的,能给我们带来什么,解决了什么样的问题,有什么优缺点等等:简要了解了一下Python虚拟机的特征: 目前有几个疑问: 1.对象 · Python通过对象 ...

  4. ubantu安装sogou输入法

    Ubuntu的搜狗输入法安装步骤   1 本来想先移除ibus,但是在之后发现如果直接使用下面的命令 sudo apt-get remove ibus 移除ibus将导致系统某些地方不正常的问题,例如 ...

  5. JZOJ P1830[9.30]送牛奶

    传送门 临近NOIp,写一些简单题. 二分+BFS,注意的是要把数组开小点,有效减少memset的时间. //OJ 1830 //by Cydiater //2016.9.22 #include &l ...

  6. 一键搭建vpn服务器

    今天花了很多时间搭建vpn服务器,后来找到一篇一键搭建服务器的文章,那叫一个爽,附上链接收藏~~~看开以后要写脚本了 http://www.centoscn.com/image-text/instal ...

  7. DockerProblem

    if you try to run the daemon manually: sudo /usr/bin/docker daemon And the error is: "FATA[0000 ...

  8. python 动态调用模块、类、方法(django项目)

    需求:近一段时间基于django框架,开发各业务层监控代码,每个业务的监控逻辑不同,因此需要开发监控子模块,动态的导入调用. 项目名称:demo_django App:common_base.moni ...

  9. 七种常见阈值分割代码(Otsu、最大熵、迭代法、自适应阀值、手动、迭代法、基本全局阈值法)

    http://blog.csdn.net/xw20084898/article/details/17564957 一.工具:VC+OpenCV 二.语言:C++ 三.原理 otsu法(最大类间方差法, ...

  10. struts2校验总结

    struts校验框架提供两种校验:客户端校验和服务端校验.它们都是主要检查浏览器输入数据是否合法的校验器. 服务端校验 服务端校验是在服务器上检查输入数据,它的实现方法是重写validate()方法. ...