touch事件

(function(){
 var delegate = function(fn, scope,opts) {
        return function() {
            return fn.apply(scope, Array.prototype.slice.call(arguments, 0));
        }
    }
   var events=function(element,preventDefault,stopPropagation){          
        if( typeof window.TouchEvent != 'undefined') {  
    // bind(element, 'touchstart',delegate(this._touchstart,this,opts), false)
    bind(element, 'touchstart',delegate(this._touchstart,this), false)
    bind(element, 'touchend',delegate(this._touchend,this), false)
    // bind(element, 'touchstart', this._touchstart, false)
    // bind(element, 'touchend', this._touchend, false)
     bind(element, 'touchcancel',this._touchcancel, false)
   } else {
     bind(element,'mousedown',this._mousedown,false) 
     bind(element, 'mouseup', this._mouseup, false) 
   }   
   
   }  
   events.prototype={  
    _mousedown:function(e){
     console.log('down')    
    },
    _mouseup:function(){
     console.log('up');   
    },
    _touchstart:function(e){
     var t=e.touches[0];   
     this._start(t.pageX,t.pageY)
           
    },
    _touchend:function(e){
     //console.log('end')    
     var t=e.changedTouches[0];   
     this._end(t.pageX,t.pageY);     
    },
    _touchcancel:function(){
     console.log('cancel')        
    },
    _start:function(x,y){
      this._startX = x;
   this._startY = y; 
   //console.log(x)     
   // if(this.ontouchstart) {
    // this.ontouchstart(x, y);
   // }
    },
    _end:function(x,y){
         e=event||window.event;    
    var offsetX = x - this._startX;
    var offsetY = y- this._startY; 
    var absX=Math.abs(offsetX);
    var absY=Math.abs(offsetY);       
    if(this.ontouchend) {
     this.ontouchend(x, y);
    } 
   
   if(absX < this.gap && absY < this.gap) {
    //this.click(e);
    //console.log(offsetX)    
    this._callback(e,'click');
   } else {    
    if(this.toright && offsetX >= this.gap&&absX>absY) {     
     //this.toright(e);
    } else if(this.toleft && offsetX <= -this.gap&&absX>absY) {
     //this.toleft(e);
    }
    if(this.tobottom && offsetY >= this.gap&&absX<absY) {
     //this.tobottom(e);
    } else if(this.totop && offsetY <= -this.gap&&absX<absY) {
     //this.totop(e);
    }
   }
     
   },
    _startX:0,
    _starty:0,
    distance:0,
    direction:'',
    gap : 10,
    _callback:function(e,dir){
     console.log(dir)     
    }
   }
  
  var  Touch=function(element,fn){
   var el=document.getElementById(element);
 
   var fn=(typeof fn)=='function'?fn:function(e){alert(e)};
   events.prototype._callback=fn
     return new events(el);
  }
  window.Touch=Touch
})(window['t'])


/*
(function(){
 var delegate = function(fn, scope) {
        return function() {
            return fn.apply(scope, Array.prototype.slice.call(arguments, 0));
        }
    }
    var handleEvent=function(opts,type){   
  return function(e){
   event=e||window.event; 
      return Event.apply(this,Array.prototype.slice.call([event,opts,type], 0));  
  }
  }
   
 var Touch=function(element,opts,preventDefault,stopPropagation){
  var el=document.getElementById(element)
  this.option=opts  
     if( typeof window.TouchEvent != 'undefined') {  
     bind(el, 'touchstart', handleEvent(opts,'start'), false)
     bind(el, 'touchend', handleEvent(opts,'end'), false)
     bind(el, 'touchcancel', handleEvent(opts,'cancel'), false)
   } else {
     bind(el,'mousedown',handleEvent(opts,'down'),false) 
     bind(el, 'mouseup', handleEvent(opts,'up'), false) 
   }     
 }

 var Event=function(e,opts,type){   
  this._element=e.target;   
  var options = options ? options : {   
   click:function(e){
    console.log('click')    
   }, 
   toleft : function() {
    console.log("left")
   },
   toright : function(e) {    
    console.log("right")
   },
   tobottom : function() {
    console.log("bottom")
   },
   totop : function() {
    console.log("up")
   },
  }
  this.support = ( typeof window.TouchEvent != 'undefined') && (window.navigator.userAgent.indexOf('Mobile') > -1);
  this._startX = 0;
  this._startY = 0;
  this._distance=0;
  var x=0,y=0;
  this._bindtouchmove = null; 
  this.gap = 10; 
  //
  console.log(this.id);
  switch(type){
   case 'start':
   var t=e.touches[0];
   this._startX=t.pageX;
   this._startY =t.pageY;
   //console.log(this._startX)   
   break;   
   case 'end':
   var t=e.changedTouches[0];
   x=e.pageX-this._startX;
   y=e.pageY-this._startY; 
   //console.log(this._startX) 
    
   break;
   case 'cancel':break;
   case 'down':
   this._startX=e.pageX;
   this._startY =e.pageY;
   break;   
   case 'up':  ;
   x=e.pageX-this._startX;
   y =e.pageY-this._startX;
   break;
  }
  
  }        

   window.Touch=Touch
})(window['touch'])

*/

/**
  * @param {DOM Object} el 传入的对象
  * @param {Object} opts 参数
  */
/*
(function() {
 var delegate = function(fn, scope) {  
  return function() {
   return fn.apply(scope, Array.prototype.slice.call(arguments, 0));   
  }
 }
 
 var Touch = function(el, options) {
  this._element = ( typeof el == 'string') ? document.getElementById(el) : el;
  
  var opts = options ? options : {   
   click:function(e){
    console.log('click')    
   }, 
   toleft : function() {
    console.log("left")
   },
   toright : function(e) {    
    console.log("right")
   },
   tobottom : function() {
    console.log("bottom")
   },
   totop : function() {
    console.log("up")
   },
  }
  this.support = ( typeof window.TouchEvent != 'undefined') && (window.navigator.userAgent.indexOf('Mobile') > -1);
  this.__startX = 0;
  this.__startY = 0;
  this.__bindtouchmove = null;
  this.el = el;
  this.gap = 10;
  Touch.click = opts.click; 
  Touch.toleft = opts.toleft;
  Touch.toright = opts.toright;
  Touch.totop = opts.totop;
  Touch.tobottom = opts.tobottom;  
  if(this.support) {  
   bind(el, 'touchstart', Touch._touchStart, false)
   bind(el, 'touchend', Touch._touchEnd, false)
   bind(el, 'touchcancel', Touch._touchEnd, false)
  } else {
   bind(el,'mousedown',Touch._mouseDown,false) 
      bind(el, 'mouseup', Touch._mouseUp, false)  
   // bind(el,'mousedown',delegate(Touch._mouseDown,this),false) 
   // bind(el, 'mouseup', delegate(Touch._mouseUp,this), false)
  }
 }
 Touch._mouseDown = function(e) {    
  Touch._ontouchstart(e.pageX, e.pageY);  
 },
 Touch._mouseUp = function(e) {   
  Touch._ontouchend(e.pageX, e.pageY,e);
 }
 Touch._touchStart = function(e) {
  var t = e.touches[0];
  this._ontouchstart(t.pageX, t.pageY);
 }
 Touch._touchEnd = function(e) {
  if(e && e.touches) {
   var t = e.touches[0];
   this._ontouchend(t.pageX, t.pageY,t);
  } else {
   this._ontouchend(e);
  }
 }
 Touch._ontouchstart = function(x,y) {   
   this.__startX = x;
   this.__startY = y;      
   if(this.ontouchstart) {
    this.ontouchstart(x, y);
   }
  }

 Touch._ontouchend = function(x,y,e) {
      this.gap=10;
   var offsetX = x - this.__startX;
   var offsetY = y- this.__startY; 
   var absX=Math.abs(offsetX);
   var absY=Math.abs(offsetY);       
   if(this.ontouchend) {
    this.ontouchend(x, y);
   } 
   if(this.click && absX < this.gap && absY < this.gap) {
    this.click(e);
   } else {    
    if(this.toright && offsetX >= this.gap&&absX>absY) {     
     this.toright(e);
    } else if(this.toleft && offsetX <= -this.gap&&absX>absY) {
     this.toleft(e);
    }
    if(this.tobottom && offsetY >= this.gap&&absX<absY) {
     this.tobottom(e);
    } else if(this.totop && offsetY <= -this.gap&&absX<absY) {
     this.totop(e);
    }
   }
   ///console.log(_element)
   //_element.preventDefalut()
   // //取消默认事件
   // e.preventDefalut();
            // //取消冒泡
            // e.stopPropgation();
  }
 Touch.support = ( typeof window.TouchEvent != 'undefined') && (window.navigator.userAgent.indexOf('Mobile') > -1);
 window.Touch = Touch;
})();
*/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值