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

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

  • Пользователь прикасается к кнопке: Основные кнопки
  • Пользователь вытаскивает палец из кнопки: Кнопка dims
  • Пользователь перетаскивает палец обратно в кнопку: Основные кнопки
  • Пользователь вытаскивает пальцы из кнопки и отпускает: Кнопка не нажимает
Кнопки MobileSafari выделяют, когда вы касаетесь их, сохраняйте выделение независимо от того, куда вы перемещаетесь, и нажмите независимо от того, где вы их отпускаете (если только не прокручивается представление, и в этом случае прикосновение всегда отменяется, даже если вы повторно вводите кнопку).

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

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

Ответ 1

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

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

Live JSFiddle DEMO

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

- Брайен