ktouch移动端事件库
最近闲来无事,写了个移动端的事件库,代码贴在下面,大家勿拍。
- /**
- @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移动端事件库的更多相关文章
- cocos2d-x开发:服务端基础库封装
元旦前面几天都在忙着面试,随后的几天也就一直在做服务端基础库开发方面的工作.对于服务端开发,是很久之前的事情了.那时候我还在大学读书,一直都是在倒腾服务端开发方面的东西,毕业后参加公司工作就是一直从事 ...
- touch.js - 移动设备上的手势识别与事件库
Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...
- 利用epoll写一个"迷你"的网络事件库
epoll是linux下高性能的IO复用技术,是Linux下多路复用IO接口select/poll的增强版本,它能显著提高程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率.另一点原因就是获取 ...
- Yarn的服务库和事件库使用方法
事件类型定义: package org.apache.hadoop.event; public enum JobEventType { JOB_KILL, JOB_INIT, JOB_START } ...
- Threejs 的场景查看 - 几个交互事件库助你方便查看场景
Threejs 的场景查看 - 几个交互事件库助你方便查看场景 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...
- 服务端事件EventSource揭秘
服务端推 服务端推,指的是由服务器主动的向客户端发送消息(响应).在应用层的HTTP协议实现中,"请求-响应"是一个round trip,它的起点来自客户端,因此在应用层之上无法实 ...
- Hadoop服务库与事件库的使用及其工作流程
Hadoop服务库与事件库的使用及其工作流程 Hadoop服务库: YARN采用了基于服务的对象管理模型,主要特点有: 被服务化的对象分4个状态:NOTINITED,INITED,STARTED, ...
- Hadoop2源码分析-YARN 的服务库和事件库
1.概述 在<Hadoop2源码分析-YARN RPC 示例介绍>一文当中,给大家介绍了YARN 的 RPC 机制,以及相关代码的演示,今天我们继续去学习 YARN 的服务库和事件库,分享 ...
- 值得收藏的8个Web端组件库
值得收藏的8个Web端组件库 Ant Design 介绍:一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验. 组件库地址:https: ...
随机推荐
- POJ3048 Max Factor
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- Tomcat访问日志详细配置
在server.xml里的<host>标签下加上 <Valve className="org.apache.catalina.valves.AccessLogValve&q ...
- 利用TabHost制作QQ客户端标签栏效果(低版本QQ)
学习一定要从基础学起,只有有一个好的基础,我们才会变得更加的perfect 下面小编将利用TabHost制作QQ客户端标签栏效果(这个版本的QQ是在前几年发布的)…. 首先我们看一下效果: 看到这个界 ...
- Linux GDB Debugging
Catalog . GDB Introduction . GDB基本命令 1. GDB Introduction GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具,GDB主要可帮助工程师 ...
- <base href="<%=basePath%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- MVC5-8 ViewData、ViewBag、TempData分析
MVC中Contoller与视图的数据传输 后台的值显示到界面上,我们有几种方式呢.MVC给我们提供了ViewData.ViewBag.TempData.Model这几种方式,当然我们也可以用ajax ...
- Beta版本——第五次冲刺博客
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- Linux系统被入侵后处理经历
服务器托管在外地机房. 突然,频繁收到一组服务器ping监控不可达邮件,赶紧登陆zabbix监控系统查看流量状况. 可见流量已经达到了800M左右,肯定不正常,马上尝试SSH登陆系统,不幸的事,这种情 ...
- 解决centos7中python-pip模块不存在的问题
centos 7中python-pip模块不存在,是因为像centos这类衍生的发行版,源跟新滞后,或者不存在.即使使用yum去search python-pip也找不到软件包. 为了使用安装滞后或源 ...
- gnuplot配置HOME目录
http://blog.csdn.net/jspenliany/article/details/39828261 本人使用gnuplot绘图,使用console version的来进行处理的时候,经常 ...