经过一点调查,下面的代码将向使用jQuery UI的虹膜选择器添加触摸事件。我确实需要让颜色选择器处理25px x 25px,以便在iPad上更容易抓取,但除此之外,这是可行的:
$(document).on({
touchstart: touchHandler,
touchmove: touchHandler,
touchend: touchHandler,
touchcancel: touchHandler
});
function touchHandler(event) {
// trick to add support for touch event to elements/widgets that do not support it
// by convetting convert touchevents into mouseevents
// only apply this trick to ui-draggable elements
if ( ! $(event.target).hasClass(\'ui-draggable\') ) {
return;
}
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type) {
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
// convert touchevents into mouseevents
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}