MuTouch,简化触摸和鼠标事件，基于JQuery

MuTouch,简化触摸和鼠标事件,基于JQuery,实现手势操作。

作者 ： 小牧COOL

QQ号 ： 895355044

QQ群 ： 215259343

感谢 ： 如果您觉得此插件好用,请点击右上角 star 支持我,谢谢~

mutouch.js基于JQuery,所以在其之前引用JQuery,HTML代码如下:

<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <!-- 开发版本 --> <script src="js/jquery.mutouch.js" type="text/javascript"></script> <!-- 线上版本 --> <script src="dist/jquery.mutouch.min.js" type="text/javascript"></script>

你必须为你的HTML标签元素设置一个id或class,如:

<div id="box"></div>

最后,调用js代码如下:

$("#box").mutouch({ offsetY : 50, //上下滑动超过50px才触发事件 onSwipeTop : function(){ //上滑事件 //do something ... } });

That's it！就是如此简单O(∩_∩)O~

mutouch.js 只有三个参数:

mutouch.js 有九个事件:

onSwipeRight 方法提供了一个参数 typeTD ,可以判断往右滑动时是往上还是往下,代码如下:

$("#box").mutouch({ onSwipeRight : function(typeTD){ //右滑事件 //do something ... if(typeTD == "top"){ //右上滑动 //do something ... } if(typeTD == "down"){ //右下滑动 //do something ... } } });

注意: 左上左下等其他同理,typeLR只可能为"left","right","none".

onTap 方法提供了一个参数 tapNum ,可以获取到轻触次数,代码如下:

$("#box").mutouch({ onTap : function(tapNum){ if(tapNum == 1){ //单次轻触事件 //do something ... } if(tapNum == 2){ //双击事件 //do something ... } if(tapNum == 50){ //50次轻触事件 //do something ... } } }); 3.如何设置 长按事件触发时间？

onLongTap 方法默认是750毫秒触发,但该方法提供了一个参数 longTapTime ,长按50毫秒为1 longTapTime,so,可以如此设置:

$("#box").mutouch({ onLongTap : function(longTapTime){ if((longTapTime*50) > 3000){ //长按3秒以上事件 //do something ... } } }); 4.onStart如何判断是触摸还是鼠标事件？

onStart 方法提供了一个原生参数 event ,可以如此判断:

$("#box").mutouch({ onStart : function(event){ var touchEvent = "ontouchend" in document?event.originalEvent.touches[0]: event; //使用 touchEvent.pageX 获取x坐标 } }); 版本日志 v0.1 增加触屏手势(上下左右滑动,单次触摸,连续两次触摸,N次触摸,长按,禁止右键菜单) v0.2 增加鼠标支持 v0.3 性能优化 v0.4 封装原始方法提供接口 v0.5 增加上拉加载,下拉刷新(逻辑有问题,此插件不适合此功能,暂时放弃) v0.6 增加文档说明 v1.0 正式版(单点触摸版) v1.1 增加触摸手势(字母C,J,L,M,N,O,S,U,V,W,Z和√,X) v2.0 分支版(增加多点操作手势) License

mutouch.js is licensed under the GNU GENERAL PUBLIC LICENSE, Version 3.

View the license file

Copyright © 2018 · 滨清科技 , Inc.

All Rights Reserved · Powered by : 小牧COOL