ktouch移动端事件库

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

  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移动端事件库

时间: 2024-10-29 03:34:25

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

移动端:移动端事件

移动端事件 一.  PC端事件 鼠标类 click.mouseover.mouseout.mouseleave.mouseenter.mouseup.mousedown.mousewheel... 键盘类 keydown.keyup... 其他类 load.blur.focus.change.... 二. 移动端事件 点击事件 双击事件 滑动事件 上滑.下滑.左滑.右滑 长按事件 摇一摇.重力感应等 三. touch事件模型 touchstart          手指刚接触屏幕时触发 touc

js学习总结----移动端事件基础及常用的事件库

一.事件基础 PC:click.mouseover.mouseout.mouseenter.mouseleave.mousemove.mousedown.mouseup.mousewheel.keydown.keyup.load.scroll.blur.focus.change... 移动端:click(单击).load.scroll.blur.focus.change.input(代替keyup.keydown)...TOUCH事件模型(处理单手指操作).GESTURE事件模型(处理多手指操作

Redis源码-事件库

网上看了很多Redis事件库的解读,自己也研究了好几遍,还是记录下来,虽然水平有限,但是进步总会是有的 网络事件库封装了Epoll的操作(当然是指Linux下的多路复用了),并且实现一个定时器,定时器也是服务端程序的基石,很多问题都需要靠定时器解决 (一)数据结构+算法构成一个完整的程序,要一窥Redis网络库,需要先从数据结构开始学习 1.整个事件循环是用一个全局的数据结构描述的,aeEventLoop /* State of an event based program */ typedef

10-移动端开发教程-移动端事件

在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件.接下来给大家简单总结一下移动端的事件. 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引入了双击缩放功能:用户双击手机页面的时候,浏览器会智能的缩放当前页面到原始大小. ?双击缩放的原理就是,当用户click一次之后,浏览器会经过约300ms之后检测是否再有一次click,如

移动端事件touchstart、touchmove、touchend详解

在PC端上的JS事件相信大家已经熟悉不少,诸如click\mouseover这类事件,都可以满足交互的需要,虽然移动端上的事件可能平常稍有接触,但是可能不太了解其中具体的用法区别. 前言: 这几个事件最早出现于IOS safari中,为了向开发人员转达一些特殊的信息,所以新增了这些事件,随着Android中的webkit的加入,慢慢地这样的专有事件成了事实的标准,从而导致W3C开始指定Touch Event规范的内容. 具体说来有这样几个事件: touchstart 手指触摸屏幕时触发,即使已经

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

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

手势识别与事件库 Touch.js若干问题及解决方法

Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具. Touch.js的代码已托管于github并开源,希望能帮助国内更多的开发者学习和开发出优秀的App产品. Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用. 极速CDN <script src="http://code.baidu.com/touch-0.2.14.min.js"></script> Examples /

利用epoll写一个&quot;迷你&quot;的网络事件库

epoll是linux下高性能的IO复用技术,是Linux下多路复用IO接口select/poll的增强版本,它能显著提高程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率.另一点原因就是获取事件的时候,它无须遍历整个被侦听的描述符集,只要遍历那些被内核IO事件异步唤醒而加入Ready队列的描述符集合就行了.epoll除了提供select/poll那种IO事件的水平触发(Level Triggered)外,还提供了边缘触发(Edge Triggered),这就使得用户空间程序有可能缓存I

05移动端事件

一.移动端三大事件 1.手指按下     ontouchstart 2.手指触摸     ontouchmove 3.手指抬起     ontouchend //注意:在移动开发时,浏览器模拟器时好时坏,一般不用onX的方式绑定事件函数,要用事件绑定的方式(即第二种) div.ontouchstart = function(){}; div.addEventListener('touchstart', function(){}); 二.PC端事件在移动端(出现的问题) 1.PC端事件在移动端略慢