Правильное поведение сенсорной кнопки для MobileSafari

Question

MobileSafari как правило имеет неправильное поведение кнопки HTML (неправильное значение: «не похоже на собственную кнопку iOS»). Правильное поведение кнопки выглядит следующим образом:

• Пользователь касается кнопки: Кнопка бликов
• Пользователь перетаскивает палец кнопки: Кнопка затемняется
• Пользователь перетаскивает палец обратно в кнопки: Кнопка подчеркивает
• Пользователь перетаскивает палец кнопки и высвобождает: кнопка не щелкает

кнопки MobileSafari выделить при прикосновении к ним, следите за особо не важно WHe вы перемещаетесь и щелкаете независимо от того, где вы их отпускаете (если только не прокручивается представление, и в этом случае прикосновение всегда отменяется, даже если вы повторно вводите кнопку).

Эта проблема применима ко всем кликабельным вещам, таким как ссылки (когда -webkit-touch-callout установлено на none). До сих пор я нашел только одно веб-приложение, которое имеет правильное поведение кнопки: Facebook. Рассматривая их код для этого, похоже, что они сделали довольно много прыгающих сквозных обручей, чтобы заставить его работать правильно (отслеживая все события мыши вручную, а не используя кнопки вообще). Код плотный, использует Javelin, и я пока не понимаю всех частей, необходимых для его работы.

Я знаю, что я немного издеваюсь (поскольку, если бы это было легко, все это сделали бы), но я все равно спрошу. Есть ли вообще доступный кусок кода, который обрабатывает эту функцию? Есть ли более простое решение, чем обратное проектирование Javelin, даже если оно применимо только к WebKit? (Javelin не очень-то хорошо подходит для моих легких потребностей.) Моя конечная цель - правильное поведение кнопки для UIWebView, встроенного в родное приложение, поэтому приемлемы гибридные решения JavaScript/ObjC (хотя гибридные подходы не приходят на ум) ,

Answer 1

В основном, что вы хотите сделать, это построить своего рода гибридный наклон функциональность для сенсорных устройств, которая обнаруживает, когда ваш палец перемещается в/из этой кнопки.

Я построил базовый JSFiddle, который реализует некоторые функции barebone. Если вы знаете какой-либо javascript, я думаю, вы получите эту идею.

Live JSFiddle DEMO

Попробуйте его на IOS устройства (и, возможно, ваш Android устройства ??).

- Брайен