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

  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

转载于:https://www.cnblogs.com/kbqncf/p/3858784.html

ktouch移动端事件库相关推荐

  1. 移动端手势库设计与实践

    前言 本次给大家分享的是常见的移动端单点触摸事件的设计思路及实践. 核心技术 主要就是利用移动端的以下3个触摸事件,来模拟和实现自定义的手势操作 touchstart:手指触摸到屏幕的一瞬间触发 to ...

  2. vue2.0桌面端框架_Element-UI组件库(Vue2.0桌面端组件库)V2.9.2 免费版

    Element-UI组件库(Vue2.0桌面端组件库)是一款很优秀好用的为开发者.设计师和产品经理推出的基于Vue 2.0的桌面端组件库软件.小编带来的这款Element-UI组件库功能强大全面,简单 ...

  3. vue-cli、脚手架创建、eslint、alias别名配置、proxy代理配置、axios、scoped、穿透、媒体查询、12栅格、动态rem、1px边框、移动端事件、300ms延迟问题(六)

    vue-cli的使用 现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建vue的开发环境.一般情况下我们都会选择使用webpack进行项目的构建,在这里我们直接使用vue官方 ...

  4. Vue.js(十) element-ui PC端组件库

    一:简介 饿了么公司基于Vue开发了两套UI组件库,PC端组件库 和 移动端组件库. 一部分组件库是对原生的HTML标签元素的封装,增加了一些新的功能. 另一部分组件库是原生HTML标签元素没有的,是 ...

  5. 移动端事件及事件应用

    目录 1.移动端事件基础 2.移动端常用的事件库 3.移动端轮播图css样式和响应 4.移动端轮播图图片延迟加载 1.移动端事件基础 PC端常用事件 事件名 作用 click 当鼠标点击时触发 mou ...

  6. 发布一个开源的c++网络事件库【转载Zark@cppthinker.com】

    Chaos是一个基于Linux平台, reactor模式的网络事件库, 目前仅支持TCP传输协议, 仅在x86_64下编译, 并遵循3-clause BSD开源协议. 在使用上, 可以说它很像boos ...

  7. 移动端cube界面设计html,滴滴开源基于 Vue.js 的移动端组件库 cube-ui

    原标题:滴滴开源基于 Vue.js 的移动端组件库 cube-ui 开源最前线(ID:OpenSourceTop) 猿妹 整编 综合自:https://didi.github.io/cube-ui/ ...

  8. Element 2.6.0 发布,基于 Vue 2.0 的桌面端组件库

    开发四年只会写业务代码,分布式高并发都不会还做程序员?   Element 2.6.0 发布了,Element 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设 ...

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

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

最新文章

  1. php+下载+网路错误,下载zip文件“网络错误失败”(PHP / NGINX)
  2. linux查看oracle的sga设置,Oracle基础教程之设置系统全局区SGA命令
  3. Android 计算Bitmap大小
  4. 文献记录(part20)--Discriminative metric learning for multi-view graph partitioning
  5. ROS环境下跑orb-slam2 单目相机
  6. eclipse 安装 lombok插件
  7. Netty堆外内存泄露排查盛宴
  8. CentOS下安装7-zip
  9. 【Linux】linux grep过滤中,不包含某些字符串
  10. Voxengo Peakbuster for mac(音频谐波增强插件)
  11. 如何布局电子商务网站
  12. 就你赚的那点钱,我们家哪里有能力请护工?
  13. leetcode·动态规划
  14. Python学习路线
  15. Python写幂函数
  16. iOS-Property follows Cocoa naming convention for returning ‘owned‘ objects
  17. 自己用的unity学习笔记(一)——unity3d基础操作
  18. css与mdx,mdx、mdd及css三者关系以及欧路中应如何安装css
  19. 计算 TCP/IP Socket 连接上下行额外流量的两个办法
  20. anti-Nim游戏(反Nim游戏)简介

热门文章

  1. 我的世界服务器修改地狱亮度,《我的世界》hypixel服务器画面亮度调节方法 存档导出介绍...
  2. 适配器模式(图画版)
  3. sourcetree 卡顿_快手与直播延迟卡顿较劲的这些年
  4. 美国签证被拒签后怎么办?
  5. 【mybatis】mysql数据库tinyint类型对应java类型
  6. STM32驱动AS5600磁性旋转位置传感器模块
  7. 优质代理IP对爬虫的作用
  8. 创建 ECS 库存不足?“到货通知”功能了解一下!
  9. 蔚来汽车Java实习面经总结-算法篇(来源:牛客与看准)
  10. 计算机应用基础书在线看,计算机应用基础