WordPress Iris Color Picker fügt iOS Touch-Ereignisse hinzu

Ich habe einen Iris Color Picker in das Front-End meines Themas implementiert, dank der Hilfe, die in dieser Frage zur Verfügung gestellt wurde, und alles funktioniert gut auf dem Desktop. Es scheint jedoch, als ob, wenn es um ein iPad Gerät geht, die Farbauswahl nicht wie erwartet funktioniert. Das Ziehen der Maus wird nicht erkannt, das Klicken auf den Farbbereich funktioniert jedoch so, als würde das Mouse-Drag-Ereignis nicht erkannt.

Ist das ein bekanntes Problem und gibt es vielleicht eine Möglichkeit, die functionalität in den Farbwähler zu stecken?

Solutions Collecting From Web of "WordPress Iris Color Picker fügt iOS Touch-Ereignisse hinzu"

Nach ein wenig Nachforschungen fügt der folgende Code Touch-Ereignisse zum Iris-Picker hinzu, der jQuery UI verwendet. Ich musste den Farbwähler 25px x 25px handhaben lassen, damit es einfacher ist, auf einem iPad zu greifen, aber ansonsten funktioniert das:

$(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(); }