将如下代码添加到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事件。
评论区
发表新的留言
您可以留言提出您的疑问或建议。
您的留言得到回复时,会通过您填写的邮箱提醒您。