将如下代码添加到jQuery库及jQueryUI相关代码之后。以纠正一些触摸屏相关的属性。

(function($){
	$.support.touch = true; // typeof Touch === 'object';
  
	if (!$.support.touch){
	  return;
	}
  
	var proto =  $.ui.mouse.prototype,
	_mouseInit = proto._mouseInit;
  
	$.extend(proto, {
	  _getElementToBind: function(){
		var el = this.element;
		if(this.widgetName == "sortable"){
		  console.log
		}
		return el;
	  },
  
	  _mouseInit: function(){
		this._getElementToBind().bind("touchstart." + this.widgetName, $.proxy(this, "_touchStart"));
		_mouseInit.apply(this, arguments);
	  },
  
	  _touchStart: function(event){
		if (event.originalEvent.targetTouches.length != 1){
		  return false;
		}
  
		if(!this._mouseCapture(event, false)){ // protects things like the "handle" option on sortable
		  return true;
		}
  
		this.element
		  .bind("touchmove." + this.widgetName, $.proxy(this, "_touchMove"))
		  .bind("touchend." + this.widgetName, $.proxy(this, "_touchEnd"));
  
		this._modifyEvent(event);
  
		$(document).trigger($.Event("mouseup")); // reset mouseHandled flag in ui.mouse
		this._mouseDown(event);
  
		return false;
	  },
  
	  _touchMove: function(event){
		this._modifyEvent(event);
		this._mouseMove(event);
	  },
  
	  _touchEnd: function(event){
		this.element
		  .unbind("touchmove." + this.widgetName)
		  .unbind("touchend." + this.widgetName);
		this._mouseUp(event);
	  },
  
	  _modifyEvent: function(event){
		event.which = 1;
		var target = event.originalEvent.targetTouches[0];
		event.pageX = target.clientX;
		event.pageY = target.clientY;
	  }
  
	});
  
  })(jQuery);

注意:使用该段代码后,jQuery click事件会在触摸屏上失效或者行为异常,建议在触摸屏时改用touchstart事件。

本篇文章相关标签: