移动端知识总结（1）
Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具.
Touch.js的代码已托管于github并开源，希望能帮助国内更多的开发者学习和开发出优秀的App产品.
Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用.
src="/touch-0.2.14.min.js"&&
touch.on('.target', 'swipeleft swiperight', function(ev){
console.log("you have done", ev.type);
向左及向右 滑动更灵活的解决方案
参考牛人博客的代码，据说相当好用。
1(function(global,doc,factoryFn){
var factory = factoryFn(global,doc);
global.util = global.util || {};
global.util.toucher = global.util.toucher ||
global.define && define(function(require,exports,module){
14 })(this,document,function(window,document){
* 判断是否拥有某个class
function hasClass(dom,classSingle){
return dom.className.match(new RegExp('(\\s|^)' + classSingle +'(\\s|$)'));
向句柄所在对象增加事件监听
支持链式调用
string 事件名
[string] 事件委托至某个class（可选）
function 符合条件的事件被触发时需要执行的回调函数
function ON(eventStr,a,b){
this._events = this._events || {};
var className,
if(typeof(a) == 'string'){
className = a.replace(/^\./,'');
className = null;
if(typeof(fn) == 'function' && eventStr && eventStr.length){
var eventNames = eventStr.split(/\s+/);
for(var i=0,total=eventNames.i&i++){
var eventName = eventNames[i];
if(!this._events[eventName]){
this._events[eventName] = [];
this._events[eventName].push({
'className' : className,
return this;
事件触发器
根据事件最原始被触发的target，逐级向上追溯事件绑定
string 事件名
object 原生事件对象
function EMIT(eventName,e){
this._events = this._events || {};
if(!this._events[eventName]){
var rest_events = this._events[eventName];
var target = e.
while (1) {
if(rest_events.length ==0){
if(target == this.dom || !target){
for(var i=0,total=rest_events.i&i++){
var classStr = rest_events[i]['className'];
var callback = rest_events[i]['fn'];
if(classStr == null){
event_callback(eventName,callback,target,e);
var eventsList = rest_
rest_events = [];
for(var i=0,total=eventsList.i&i++){
var classStr = eventsList[i]['className'];
var callback = eventsList[i]['fn'];
if(hasClass(target,classStr)){
if(event_callback(eventName,callback,target,e) == false){
rest_events.push(eventsList[i]);
target = target.parentN
* 执行绑定的回调函数，并创建一个事件对象
* [string]事件名
* [function]被执行掉的函数
* [object]指向的dom
* [object]原生event对象
function event_callback(name,fn,dom,e){
var touch = e.touches.length ? e.touches[0] : {};
var newE = {
'type' : name,
'target' : e.target,
'pageX' : touch.clientX || 0,
'pageY' : touch.clientY || 0
if(name == 'swipe' && e.startPosition){
newE.startX = e.startPosition['pageX'],
newE.startY = e.startPosition['pageY'],
newE.moveX = newE.pageX - newE.startX,
newE.moveY = newE.pageY - newE.startY
var call_result = fn.call(dom,newE);
if(call_result == false){
e.preventDefault();
e.stopPropagation();
return call_
* 判断swipe方向
function swipeDirection(x1, x2, y1, y2) {
return Math.abs(x1 - x2) &=
Math.abs(y1 - y2) ? (x1 - x2 & 0 ? 'Left' : 'Right') : (y1 - y2 & 0 ? 'Up' : 'Down')
* 监听原生的事件，主动触发模拟事件
function eventListener(DOM){
var this_touch = this;
var touchStartTime = 0;
var lastTouchTime = 0;
var x1,y1,x2,y2;
var touchD
var isActive = false;
var eventMark = null;
function actionOver(e){
isActive = false;
clearTimeout(longTap);
clearTimeout(touchDelay);
function touchStart(e){
eventMark =
x1 = e.touches[0].pageX;
y1 = e.touches[0].pageY;
isActive = true;
touchStartTime = new Date();
EMIT.call(this_touch,'swipeStart',e);
clearTimeout(longTap);
longTap = setTimeout(function(){
actionOver(e);
EMIT.call(this_touch,'longTap',e);
function touchend(e){
EMIT.call(this_touch,'swipeEnd',eventMark);
if(!isActive){
var now = new Date();
if(now - lastTouchTime & 260){
touchDelay = setTimeout(function(){
actionOver();
EMIT.call(this_touch,'singleTap',eventMark);
clearTimeout(touchDelay);
actionOver(e);
EMIT.call(this_touch,'doubleTap',eventMark);
lastTouchTime =
function touchmove(e){
eventMark =
e.startPosition = {
'pageX' : x1,
'pageY' : y1
EMIT.call(this_touch,'swipe',e);
if(!isActive){
x2 = e.touches[0].pageX
y2 = e.touches[0].pageY
if(Math.abs(x1-x2)&2 || Math.abs(y1-y2)&2){
var direction = swipeDirection(x1, x2, y1, y2);
EMIT.call(this_touch,'swipe' + direction,e);
actionOver(e);
EMIT.call(this_touch,'singleTap',e);
actionOver(e);
* 对开始手势的监听
DOM.addEventListener('touchstart',touchStart);
DOM.addEventListener('MSPointerDown',touchStart);
DOM.addEventListener('pointerdown',touchStart);
* 对手势结束的监听（轻击）
DOM.addEventListener('touchend',touchend);
DOM.addEventListener('MSPointerUp',touchend);
DOM.addEventListener('pointerup',touchend);
* 对移动手势的监听
DOM.addEventListener('touchmove',touchmove);
DOM.addEventListener('MSPointerMove',touchmove);
DOM.addEventListener('pointermove',touchmove);
* 对移动结束的监听
DOM.addEventListener('touchcancel',actionOver);
DOM.addEventListener('MSPointerCancel',actionOver);
DOM.addEventListener('pointercancel',actionOver);
function touch(DOM,param){
var param = param || {};
this.dom = DOM;
eventListener.call(this,this.dom);
touch.prototype['on'] = ON;
return function (dom){
return new touch(dom);
解决除谷歌浏览器之外的浏览器兼容性方案
1：jquery mobile里面的touch组件。
1：百度的童鞋们实现的touch.js.网址也贴一下吧：
3：参考大神的：
(function($) {
var options, Events, Touch
options = {
Events = ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'tap', 'longTap', 'drag']
Events.forEach(function(eventName) {
$.fn[eventName] = function() {
var touch = new Touch($(this), eventName)
touch.start()
if (arguments[1]) {
options = arguments[1]
return this.on(eventName, arguments[0])
Touch = function() {
var status, ts, tm, te
this.target = arguments[0]
this.e = arguments[1]
Touch.prototype.framework = function(e) {
e.preventDefault()
var events
if (e.changedTouches) events = e.changedTouches[0]
else events = e.originalEvent.touches[0]
return events
Touch.prototype.start = function() {
var self = this
self.target.on("touchstart",
function(event) {
event.preventDefault()
var temp = self.framework(event)
var d = new Date()
self.ts = {
x: temp.pageX,
y: temp.pageY,
d: d.getTime()
self.target.on("touchmove",
function(event) {
event.preventDefault()
var temp = self.framework(event)
var d = new Date()
self.tm = {
x: temp.pageX,
y: temp.pageY
if (self.e == "drag") {
self.target.trigger(self.e, self.tm)
self.target.on("touchend",
function(event) {
event.preventDefault()
var d = new Date()
if (!self.tm) {
self.tm = self.ts
self.te = {
x: self.tm.x - self.ts.x,
y: self.tm.y - self.ts.y,
d: (d - self.ts.d)
self.tm = undefined
self.factory()
Touch.prototype.factory = function() {
var x = Math.abs(this.te.x)
var y = Math.abs(this.te.y)
var t = this.te.d
var s = this.status
if (x & 5 && y & 5) {
if (t & 300) {
s = "longTap"
} else if (x & options.x && y & options.y) {
if (t & 250) {
if (this.te.y & 0) {
s = "swipeDown"
s = "swipeUp"
s = "swipe"
} else if (y & options.y && x & options.x) {
if (t & 250) {
if (this.te.x & 0) {
s = "swipeLeft"
s = "swipeRight"
s = "swipe"
if (s == this.e) {
this.target.trigger(this.e)
})(window.jQuery || window.Zepto)
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2856次
排名：千里之外
(3)(1)(1)(2)(3)javascript移动开发中touch触摸事件详解
作者：Big_Dot
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了javascript移动开发中touch触摸事件，感兴趣的小伙伴们可以参考一下
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁！
W3C DOM把事件对象作为事件处理函数的第一个参数传入进去
IE将事件对象作为window对象的一个属性（相当于全局变量）
originalEvent对象
在一次偶然的使用中，我发现当使用on()函数并且传入第二个选择器参数时,e.touches[0]的访问为undefined，打印e发现，它的事件对象不是原生的事件对象。经查阅发现它是jquery事件对象。
$(window).on("touchstart","body",function(e){
console.log(e)
上面例子中event中有一个originalEvent属性，而这才是真正的touch事件。jQuery.Event 是一个构造函数，其创建一个可读写的jQuery事件对象，并在event 对象保留了对这个原生事件对象 event 的引用($event.originalEvent)。我们绑定的事件处理程序所处理的事件对象都是 $event。该方法也可以传递一个自定义事件的类型名，用于生成用户自定义事件对象。
touchmove: 当手指在屏幕上滑动的时候连续地触发。
touchstart: 当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发
touchend: 当手指从屏幕上离开的时候触发。
TouchEvent对象
每一个touch事件的触发都会产生一个TouchEvent对象，以下是TouchEvent对象三个比较常用的重要属性
touches 当前位于屏幕上的所有手指的一个列表。
targetTouches 特定于事件目标的Touch对象的数组。[当前手指]
changeTouches 表示自上次触摸以来发生了什么改变的Touch对象的数组。
在这里，我用js写了一个touch事件，点击屏幕可触发,将其事件事件对象在控制台打印出，结果如下（箭头指向的是上述三个属性）：
window.addEventListener("touchstart",function(event){
console.log(event);
触摸事件对象属性
touches、targetTou、changeTouches都包含以下属性值
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触摸的DOM节点目标。
还是上面的那个例子，changeTouches对象在控制台输出如下：
以上就是本文的全部内容，希望对大家的学习有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具[…] 这里我也把相关的说明转载到了我的博客，你也可以直接在这里查看：/?p=263 […]
2016年把太多的时间放在了做网站上，因为一直有一颗想做独立站长的心。
目前大部分网站已被我关闭，仅剩下和
2017年该调整重点方向了，要把技术提高几个档次，专心学习js、python、mysql，每天坚持学习，每周坚持跑步和写博客。
把更多的时间留给照顾家人上。
2017年五月
891011121314
15161718192021
22232425262728JS实现touch 点击滑动轮播实例代码
作者：叫我多多酱
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JS实现touch 点击滑动轮播实例代码,需要的朋友可以参考下
废话不多说了，直接给大家贴js代码了，具体代码如下所示：
&script src="../js/jquery-1.8.3.min.js"&&/script&
&script src="../js/jQuery.mobile-1.3.2.min.js"&&/script&
----------------------需要应用jquery .mobile自行百度
.num-zcon{
height: 12.5
.num-container1 {
height: 12.5
background: url("icons/effect-img/13.png")no-
background-size:
.num-container2 {
height: 12.5
background: url("icons/effect-img/15.png")no-
background-size:
.num-container3 {
height: 12.5
background: url("icons/effect-img/177.png")no-
background-size:
.num-container4 {
height: 12.5
background: url("icons/effect-img/18.png")no-
background-size:
.num-container5 {
height: 12.5
background: url("icons/effect-img/19.png")no-
background-size:
.num-float{
z-index: 3;
text-align:
margin-top: -1.35
background:#
height: 0.4375
width: 0.4375
border-radius: 50%;
opacity: 0.5;
.num-kong{
height: 0.625
width: 0.25
.num-kong-width{
height: 0.9375
.num-kong-win{
height: 0.625
width: 0.1
----------
&div class="num-zcon"&
&div class="num-container1" id="adv1"&
&div class="num-container2" id="adv2"&
&div class="num-container3" id="adv3"&
&div class="num-container4" id="adv4"&
&div class="num-container5" id="adv5"&
&div class="num-float ub ub-ac ub-pc"&
&div class="num-a" id="ab1"&
&div class="num-kong"&
&div class="num-a" id="ab2"&
&div class="num-kong"&
&div class="num-a" id="ab3"&
&div class="num-kong"&
&div class="num-a" id="ab4"&
&div class="num-kong"&
&div class="num-a" id="ab5"&
//横幅广告；
var Nownumber = 1;//1图；
var Maxnumber = 5;//总个数；
function show() {
for (var i = 1; i &= M i++) {
if (Nownumber == i) {
document.getElementById("adv" + Nownumber).style.display = 'block';
document.getElementById("ab" + Nownumber).style.opacity = 1;
document.getElementById("adv" + i).style.display = 'none';
document.getElementById("ab" + i).style.opacity = 0.5;
document.getElementById("adv" + i).style.transition = "1s";
if (Nownumber == Maxnumber) {
Nownumber = 1;
Nownumber++;
theTime = setInterval('show()', 5000);
$(document).on("pageinit","#pageone",function(){
$("#adv1").on("swiperight",function(){
$(this).hide();
Nownumber=5;
$("#adv5").show();
$("#adv5").on("swiperight",function(){
$(this).hide();
Nownumber=4;
$("#adv4").show();
$("#adv4").on("swiperight",function(){
$(this).hide();
Nownumber=3;
$("#adv3").show();
$("#adv3").on("swiperight",function(){
$(this).hide();
Nownumber=2;
$("#adv2").show();
$("#adv2").on("swiperight",function(){
$(this).hide();
Nownumber=1;
$("#adv1").show();
$("#adv1").on("swipeleft",function(){
$(this).hide();
Nownumber=2;
$("#adv2").show();
$("#adv2").on("swipeleft",function(){
$(this).hide();
Nownumber=3;
$("#adv3").show();
$("#adv3").on("swipeleft",function(){
$(this).hide();
Nownumber=4;
$("#adv4").show();
$("#adv4").on("swipeleft",function(){
$(this).hide();
Nownumber=5;
$("#adv5").show();
$("#adv5").on("swipeleft",function(){
$(this).hide();
Nownumber=1;
$("#adv1").show();
以上所述是小编给大家介绍的JS实现touch 点击滑动轮播实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}