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

  1. /**
  2. @version 1.0.0
  3. @author gangli
  4. @deprecated 移动端触摸事件库
  5. */
  6. (function () {
  7. "use strict";
  8. var util = {
  9. $: function (selector) {
  10. return document.querySelector(selector);
  11. },
  12. getEventInfo: function (e) {
  13. var _e = {};
  14. _e.pageX = e.changedTouches[0].pageX;
  15. _e.pageY = e.changedTouches[0].pageY;
  16. _e.target = e.target;
  17. return _e;
  18. }
  19. };
  20. var _tap = function (callback) {
  21. this.addEventListener('touchstart', function (e) {
  22. var _e = util.getEventInfo(e);
  23. _e.type = 'tap';
  24. callback.call(this, _e);
  25. }, false);
  26. };
  27. var _longtap = function (callback) {
  28. var interval = 800 , s , e , timer , el;
  29. this.addEventListener('touchstart', function (e) {
  30. var _e = util.getEventInfo(e);
  31. el = _e.target;
  32. s = Date.now();
  33. timer = setTimeout(function () {
  34. _e.type = 'longtap';
  35. callback.call(el, _e);
  36. }, interval);
  37. }, false);
  38. this.addEventListener('touchend', function (e) {
  39. clearTimeout(timer);
  40. }, false);
  41. };
  42. var _swipe = function (callback) {
  43. var s = {}, e = {}, d = {}, distance = 50,
  44. angle = 0,
  45. type;
  46. this.addEventListener('touchstart', function (evt) {
  47. var _e = util.getEventInfo(evt);
  48. s.x = _e.pageX;
  49. s.y = _e.pageY;
  50. evt.preventDefault();
  51. }, false);
  52. this.addEventListener('touchend', function (evt) {
  53. var _e = util.getEventInfo(evt);
  54. e.x = _e.pageX;
  55. e.y = _e.pageY;
  56. d.x = e.x - s.x;
  57. d.y = e.y - s.y;
  58. if (Math.abs(d.x) < distance && Math.abs(d.y) < distance) return false;
  59. angle = Math.abs(Math.atan((e.y - s.y) / (e.x - s.x)) / Math.PI * 180);
  60. if (angle > 45) {
  61. type = d.y < 0 ? 'swipe-up' : 'swipe-down';
  62. } else {
  63. type = d.x < 0 ? 'swipe-left' : 'swipe-right';
  64. }
  65. callback.call(this, {
  66. type: type,
  67. start: s,
  68. end: e,
  69. distance: d,
  70. target: _e.target
  71. });
  72. evt.preventDefault();
  73. }, false);
  74. }
  75. var _drag = function (callback) {
  76. var dragStart = false, s = {}, e = {}, o = {};
  77. this.addEventListener('touchstart', function (evt) {
  78. dragStart = true;
  79. var _e = util.getEventInfo(evt);
  80. s.x = _e.pageX;
  81. s.y = _e.pageY;
  82. evt.preventDefault();
  83. }, false);
  84. this.addEventListener('touchmove', function (evt) {
  85. if (!dragStart) return;
  86. var _e = util.getEventInfo(evt);
  87. o.x = _e.pageX - s.x;
  88. o.y = _e.pageY - s.y;
  89. callback.call(this, {
  90. type: "drag-move",
  91. start: s,
  92. offset: o,
  93. target: _e.target
  94. });
  95. }, false);
  96. this.addEventListener('touchend', function (evt) {
  97. dragStart = false;
  98. var _e = util.getEventInfo(evt);
  99. e.x = _e.pageX;
  100. e.y = _e.pageY;
  101. callback.call(this, {
  102. type: "drag-end",
  103. start: s,
  104. offset: o,
  105. end: e,
  106. target: _e.target
  107. });
  108. }, false);
  109. }
  110. var eventMap = {
  111. tap: _tap,
  112. swipe: _swipe,
  113. longtap: _longtap,
  114. drag: _drag
  115. }
  116. var ktouch = {
  117. ver: '1.0.0',
  118. on: function (el, type, fn) {
  119. try {
  120. var el = util.$(el);
  121. eventMap[type].call(el, fn);
  122. return this;
  123. } catch (e) {
  124. console.error('type error : %s is not allowed', type);
  125. }
  126. }
  127. }
  128. window.ktouch = ktouch;
  129. })();

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. POJ3048 Max Factor

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  2. Tomcat访问日志详细配置

    在server.xml里的<host>标签下加上 <Valve className="org.apache.catalina.valves.AccessLogValve&q ...

  3. 利用TabHost制作QQ客户端标签栏效果(低版本QQ)

    学习一定要从基础学起,只有有一个好的基础,我们才会变得更加的perfect 下面小编将利用TabHost制作QQ客户端标签栏效果(这个版本的QQ是在前几年发布的)…. 首先我们看一下效果: 看到这个界 ...

  4. Linux GDB Debugging

    Catalog . GDB Introduction . GDB基本命令 1. GDB Introduction GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具,GDB主要可帮助工程师 ...

  5. <base href="<%=basePath%>

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  6. MVC5-8 ViewData、ViewBag、TempData分析

    MVC中Contoller与视图的数据传输 后台的值显示到界面上,我们有几种方式呢.MVC给我们提供了ViewData.ViewBag.TempData.Model这几种方式,当然我们也可以用ajax ...

  7. Beta版本——第五次冲刺博客

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  8. Linux系统被入侵后处理经历

    服务器托管在外地机房. 突然,频繁收到一组服务器ping监控不可达邮件,赶紧登陆zabbix监控系统查看流量状况. 可见流量已经达到了800M左右,肯定不正常,马上尝试SSH登陆系统,不幸的事,这种情 ...

  9. 解决centos7中python-pip模块不存在的问题

    centos 7中python-pip模块不存在,是因为像centos这类衍生的发行版,源跟新滞后,或者不存在.即使使用yum去search python-pip也找不到软件包. 为了使用安装滞后或源 ...

  10. gnuplot配置HOME目录

    http://blog.csdn.net/jspenliany/article/details/39828261 本人使用gnuplot绘图,使用console version的来进行处理的时候,经常 ...