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
转载于:https://www.cnblogs.com/kbqncf/p/3858784.html
ktouch移动端事件库相关推荐
- 移动端手势库设计与实践
前言 本次给大家分享的是常见的移动端单点触摸事件的设计思路及实践. 核心技术 主要就是利用移动端的以下3个触摸事件,来模拟和实现自定义的手势操作 touchstart:手指触摸到屏幕的一瞬间触发 to ...
- vue2.0桌面端框架_Element-UI组件库(Vue2.0桌面端组件库)V2.9.2 免费版
Element-UI组件库(Vue2.0桌面端组件库)是一款很优秀好用的为开发者.设计师和产品经理推出的基于Vue 2.0的桌面端组件库软件.小编带来的这款Element-UI组件库功能强大全面,简单 ...
- vue-cli、脚手架创建、eslint、alias别名配置、proxy代理配置、axios、scoped、穿透、媒体查询、12栅格、动态rem、1px边框、移动端事件、300ms延迟问题(六)
vue-cli的使用 现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建vue的开发环境.一般情况下我们都会选择使用webpack进行项目的构建,在这里我们直接使用vue官方 ...
- Vue.js(十) element-ui PC端组件库
一:简介 饿了么公司基于Vue开发了两套UI组件库,PC端组件库 和 移动端组件库. 一部分组件库是对原生的HTML标签元素的封装,增加了一些新的功能. 另一部分组件库是原生HTML标签元素没有的,是 ...
- 移动端事件及事件应用
目录 1.移动端事件基础 2.移动端常用的事件库 3.移动端轮播图css样式和响应 4.移动端轮播图图片延迟加载 1.移动端事件基础 PC端常用事件 事件名 作用 click 当鼠标点击时触发 mou ...
- 发布一个开源的c++网络事件库【转载Zark@cppthinker.com】
Chaos是一个基于Linux平台, reactor模式的网络事件库, 目前仅支持TCP传输协议, 仅在x86_64下编译, 并遵循3-clause BSD开源协议. 在使用上, 可以说它很像boos ...
- 移动端cube界面设计html,滴滴开源基于 Vue.js 的移动端组件库 cube-ui
原标题:滴滴开源基于 Vue.js 的移动端组件库 cube-ui 开源最前线(ID:OpenSourceTop) 猿妹 整编 综合自:https://didi.github.io/cube-ui/ ...
- Element 2.6.0 发布,基于 Vue 2.0 的桌面端组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? Element 2.6.0 发布了,Element 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设 ...
- 利用epoll写一个迷你的网络事件库
epoll是linux下高性能的IO复用技术,是Linux下多路复用IO接口select/poll的增强版本,它能显著提高程序在大量并发连接中只有少量活跃的情况下的系统CPU利用率.另一点原因就是获取 ...
最新文章
- php+下载+网路错误,下载zip文件“网络错误失败”(PHP / NGINX)
- linux查看oracle的sga设置,Oracle基础教程之设置系统全局区SGA命令
- Android 计算Bitmap大小
- 文献记录(part20)--Discriminative metric learning for multi-view graph partitioning
- ROS环境下跑orb-slam2 单目相机
- eclipse 安装 lombok插件
- Netty堆外内存泄露排查盛宴
- CentOS下安装7-zip
- 【Linux】linux grep过滤中,不包含某些字符串
- Voxengo Peakbuster for mac(音频谐波增强插件)
- 如何布局电子商务网站
- 就你赚的那点钱,我们家哪里有能力请护工?
- leetcode·动态规划
- Python学习路线
- Python写幂函数
- iOS-Property follows Cocoa naming convention for returning ‘owned‘ objects
- 自己用的unity学习笔记(一)——unity3d基础操作
- css与mdx,mdx、mdd及css三者关系以及欧路中应如何安装css
- 计算 TCP/IP Socket 连接上下行额外流量的两个办法
- anti-Nim游戏(反Nim游戏)简介
热门文章
- 我的世界服务器修改地狱亮度,《我的世界》hypixel服务器画面亮度调节方法 存档导出介绍...
- 适配器模式(图画版)
- sourcetree 卡顿_快手与直播延迟卡顿较劲的这些年
- 美国签证被拒签后怎么办?
- 【mybatis】mysql数据库tinyint类型对应java类型
- STM32驱动AS5600磁性旋转位置传感器模块
- 优质代理IP对爬虫的作用
- 创建 ECS 库存不足?“到货通知”功能了解一下!
- 蔚来汽车Java实习面经总结-算法篇(来源:牛客与看准)
- 计算机应用基础书在线看,计算机应用基础