手势响应脚本

为了完成作业，写了段小脚本

能监听的绑定事件 ：

tap/longTap

beforeslide

onslide/onslideup/onslidedown/onslideleft/onslideright

slideup/slidedown/slideleft/slideright

使用方法：

//传入绑定元素，生成对象

var ttt=new JTouch({
    ele:document.body,
    isDebug:true
});
//监听body的tap事件

ttt.on("tap",function(){ console.log("tap"); })

//监听body里类别为green的slideup事件

ttt.on("slideup",".green",function(){ console.log("slideupInGreenDom"); })

代码开始了

function JTouch(cofig){
    this.ele = cofig.ele;
    this.axis = 'X';
    this.reverseAxis = 'Y';
    this.directors = ["up","down","left","right"];
    this.init();    
    this.log = cofig.isDebug ?function(text){
        var pNode = document.createElement("p");
        pNode.innerHTML = text;
        document.body.appendChild(pNode);
    }:function(){}
}
JTouch.prototype.init = function(){
    var device = this._device();
    this.ele.addEventListener(device.startEvt, this);
    this.ele.addEventListener(device.moveEvt, this);
    this.ele.addEventListener(device.endEvt, this);
}

 

一些内部私有方法

//判断终端
JTouch.prototype._device=function(){
    var hasTouch = !!('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
    var startEvt = hasTouch ? 'touchstart' : 'mousedown';
    var moveEvt = hasTouch ? 'touchmove' : 'mousemove';
    var endEvt = hasTouch ? 'touchend' : 'mouseup';
    return {
      hasTouch: hasTouch,
      startEvt: startEvt,
      moveEvt: moveEvt,
      endEvt: endEvt
    };
}
//用类别判断是否触发事件
JTouch.prototype._hasClass=function(dom,classSingle){
    return dom.className.match(new RegExp('(\\s|^)' + classSingle +'(\\s|$)'));
}
//触发事件
JTouch.prototype._emit=function(eventName,e){
    this._events = this._events || {};
        if(!this._events[eventName]){
            return
        }
        var rest_events = this._events[eventName];
        var target = e.target;
        while (1) {
            if(rest_events.length ==0){
                return;
            }
            if(target == this.ele || !target){
                for(var i=0,total=rest_events.length;i<total;i++){
                    var classStr = rest_events[i]['className'];
                    var callback = rest_events[i]['fn'];
                    if(classStr == null){
                        this._event_callback(eventName,callback,target,e);
                    }
                }
                return;
            }
            var eventsList = rest_events;
            rest_events = [];
            for(var i=0,total=eventsList.length;i<total;i++){
                var classStr = eventsList[i]['className'];
                var callback = eventsList[i]['fn'];
                if(this._hasClass(target,classStr)){
                    if(this._event_callback(eventName,callback,target,e) == false){
                        return
                    }
                }else{
                    rest_events.push(eventsList[i]);
                }
            }
            target = target.parentNode;
        }
}

 事件的执行

JTouch.prototype._event_callback=function(name,fn,dom,e){
    var touch = e.touches.length ? e.touches[0] : {};
    var call_result = fn.call(dom,e);
    //若绑定方法返回false，阻止浏览器默认事件
    if(call_result == false){
        e.preventDefault();
        e.stopPropagation();
    }
    return call_result;
}

事件绑定和销毁，低端的ie部兼容此种方式，需要自己另外写hack代码

JTouch.prototype.handleEvent = function (evt) {
    var device = this._device();
    switch (evt.type) {
    case device.startEvt:
      this.startHandler(evt);
      break;
    case device.moveEvt:
      this.moveHandler(evt);
      break;
    case device.endEvt:
      this.endHandler(evt);
      break;
    case 'touchcancel':
      this.endHandler(evt);
      break;
    case 'orientationchange':
      this.orientationchangeHandler();
      break;
    case 'focus':
      this.isAutoplay && this.play();
      break;
    case 'blur':
      this.pause();
      break;
    }
  };

JTouch.prototype.destroy = function () {
    var device = this._device();
    this.ele.removeEventListener(device.startEvt, this);
    this.ele.removeEventListener(device.moveEvt, this);
    this.ele.removeEventListener(device.endEvt, this);
    window.removeEventListener('orientationchange', this);
    window.removeEventListener('focus', this);
    window.removeEventListener('blur', this);
};

事件的触发

//start
JTouch.prototype.startHandler = function (evt) {
    var device = this._device();
    var target = evt.target;
    if (target.tagName !== 'SELECT' && target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && target.tagName !== 'A' &&target.tagName !== 'VIDEO') {
        evt.preventDefault();
     }
    this.isMoving = true;
    this.onslidestart && this.onslidestart();
    this.startTime = new Date().getTime();
    this.startX = device.hasTouch ? evt.targetTouches[0].pageX : evt.pageX;
    this.startY = device.hasTouch ? evt.targetTouches[0].pageY : evt.pageY;
    this.moveX = this.startX;
    this.moveY = this.startY;
    this._startHandler && this._startHandler(evt);
    this.offset = {X:0,Y:0};
    var that = this;
    var startTime = this.startTime,offset=this.offset;
    this.longtapcheak = setTimeout(function(){
        if(that.isMoving&&that.startTime===startTime&&offset==that.offset){
            that.isMoving = false;
            that.offset.X = that.offset.Y = 0;
            that._emit("longTap",evt);
            that.log("longTap");
        }
    },500);
    this.log('Event: beforeslide');
    that._emit("beforeslide",evt);
 };

//方向判断

JTouch.prototype._estimate = function(offset){
  if(Math.abs(offset.X) - Math.abs(offset.Y)>10){
     return  offset.X > 0 ? "right":"left"
  }else{
       return  offset.Y > 0 ? "down":"up"
  }
}

//move

JTouch.prototype.moveHandler = function (evt) {
	if (this.isMoving) {
	  var device = this._device();
	  var axis = this.axis;
	  var reverseAxis = this.reverseAxis;
	  var directorOffset = {
		X: device.hasTouch ? evt.targetTouches[0].pageX - this.moveX : evt.pageX - this.moveX,
		Y: device.hasTouch ? evt.targetTouches[0].pageY - this.moveY : evt.pageY - this.moveY
	  };
	  var offset = {
		  X: device.hasTouch ? evt.targetTouches[0].pageX - this.startX : evt.pageX - this.startX,
		  Y: device.hasTouch ? evt.targetTouches[0].pageY - this.startY : evt.pageY - this.startY
	  }
	  var directors = this.directors;
	  var res = this._moveHandler ? this._moveHandler(evt) : false;
	  if (Math.abs(Math.abs(directorOffset.X) - Math.abs(directorOffset.Y))> 10) {
		var direct = this._estimate(offset);
		var eventDirect = 'onslide'+direct;
		this._emit(eventDirect,evt);
		this._emit('onslide',evt);
		this.log('Event: onslide'+direct); 
		this.moveX = device.hasTouch ? evt.targetTouches[0].pageX:evt.pageX;
		this.moveY = device.hasTouch ? evt.targetTouches[0].pageY:evt.pageY;
	  }
	  this.offset = offset;
	}
};

//end

JTouch.prototype.endHandler = function (evt) {
	if(this.isMoving){
		this.isMoving = false;
		var offset = this.offset;
		var axis = this.axis;
		var endTime = new Date().getTime();
		// a quick slide time must under 300ms
		// a quick slide should also slide at least 10 px
		var res = this._endHandler ? this._endHandler(evt) : false;
		var direct = this._estimate(offset);
		var eventDirect = 'slide'+direct;
		clearTimeout(this.longtapcheak);
		
		if(Math.abs(this.offset.X) < 10 && Math.abs(this.offset.Y) < 10){
			this.log("tap");
			this._emit("tap",evt);
		}else{
			this._emit("afterslide",evt);
			this._emit(eventDirect,evt);
			this.log('Event: afterslide'+direct);
		}
		this.offset.X = this.offset.Y = this.moveX = this.moveY = 0;
	}

};