: активный псевдокласс не работает в мобильном сафари - PullRequest
Новая
       57

: активный псевдокласс не работает в мобильном сафари

95 голосов
/ 07 октября 2010

В Webkit на iPhone / iPad / iPod указание стиля для псевдокласса: active для тега <a> не срабатывает при нажатии на элемент.Как я могу заставить это вызвать?Пример кода: 

<style> 
a:active { 
    background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>

Ответы [ 12 ]

220 голосов
/ 16 января 2012 
<body ontouchstart="">
    ...
</body>

Применяется только один раз, в отличие от каждого элемента кнопки, казалось, исправить все кнопки на странице.В качестве альтернативы вы можете использовать эту небольшую библиотеку JS под названием Fastclick .Он ускоряет события нажатия на сенсорных устройствах и также решает эту проблему.

45 голосов
/ 13 ноября 2015

Как уже говорилось в других ответах, iOS Safari не вызывает псевдокласс :active, если к элементу не присоединено событие касания, но пока это поведение было "волшебным". Я наткнулся на эту маленькую рекламу в Safari Developer Library , которая объясняет это (выделено мной):

Также можно использовать свойство CSS -webkit-tap-highlight-color в сочетании с установкой события касания, чтобы настроить кнопки на поведение, аналогичное рабочему столу. В iOS события мыши отправляются так быстро, что активное или нерабочее состояние никогда не принимается. Следовательно, псевдо-состояние :active запускается только в том случае, если для элемента HTML установлено событие касания, например , когда ontouchstart установлен для элемента следующим образом: 

<button class="action" ontouchstart=""
        style="-webkit-tap-highlight-color: rgba(0,0,0,0);">
    Testing Touch on iOS
</button>

Теперь, когда на iOS нажимают и удерживают кнопку, она меняет цвет на указанный без появления окружающего прозрачного серого цвета.

Другими словами, установка события ontouchstart (даже если оно пустое) явно указывает браузеру реагировать на события касания.

На мой взгляд, это некорректное поведение, и, вероятно, оно восходит к тому времени, когда «мобильная» сеть в основном отсутствовала (посмотрите на эти скриншоты на связанной странице, чтобы понять, что я имею в виду), и все было мышью ориентированный. Интересно отметить, что другие, более новые мобильные браузеры, такие как на Android, отображают псевдо-состояние «: active» просто на ощупь, без каких-либо взломов, подобных тому, что требуется для iOS.

(Примечание: если вы хотите использовать свои собственные пользовательские стили в iOS, вы также можете отключить серое полупрозрачное поле по умолчанию, которое iOS использует вместо псевдосостояния :active, с помощью свойства -webkit-tap-highlight-color CSS , как объяснено на той же ссылке выше.)

После некоторых экспериментов ожидаемое решение установки события ontouchstart для элемента <body>, который всех событий touch, а затем всплывающих, не работает полностью. Если элемент отображается в окне просмотра при загрузке страницы, то он работает нормально, но прокрутка вниз и касание элемента, который был вне области просмотра, не вызывает псевдо-состояние :active, как и должно , Итак, вместо 

<!DOCTYPE html>
<html><body ontouchstart></body></html>

прикрепить событие ко всем элементам вместо того, чтобы полагаться на событие, всплывающее до тела (используя jQuery): 

$('body *').on('touchstart', function (){});

Однако я не знаю о последствиях этого для производительности, так что будьте осторожны.

РЕДАКТИРОВАТЬ: Есть один серьезный недостаток этого решения: даже прикосновение к элементу во время прокрутки страницы активирует псевдо-состояние :active. Чувствительность слишком сильная. Android решает эту проблему, вводя очень небольшую задержку перед отображением состояния, которая отменяется при прокрутке страницы. В свете этого я предлагаю использовать это только для отдельных элементов. В моем случае я разрабатываю веб-приложение для использования в полевых условиях, которое представляет собой список кнопок для навигации по страницам и отправки действий. Так как в некоторых случаях вся страница содержит много кнопок, у меня это не сработает. Однако вы можете установить псевдо-состояние :hover, чтобы заполнить его вместо этого. После отключения стандартного серого поля это работает отлично.

39 голосов
/ 07 октября 2010

Добавьте обработчик события ontouchstart в свой тег .Это заставляет CSS работать магическим образом. 

<a ontouchstart="">Click me</a>
7 голосов
/ 19 декабря 2016

Это работает для меня: 

document.addEventListener("touchstart", function() {},false);

Примечание: если вы сделаете этот трюк, также стоит удалить цвет по умолчанию для выделения крана, который применяет Mobile Safari с использованием следующего правила CSS. 

html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
4 голосов
/ 08 декабря 2016

По состоянию на 8 декабря 2016 г. принятый ответ (<body ontouchstart="">...</body>) не работает для меня в Safari 10 (iPhone 5s): этот хак работает только для тех элементов, которые были видны при загрузке страницы.

Однако, добавив: 

<script type='application/javascript'>
  document.addEventListener("touchstart", function() {}, false);
</script>
От

до head работает так, как я хочу, с тем недостатком, что теперь все события касания во время прокрутки также вызывают псевдо-состояние :active на элементах касания. (Если это проблема для вас, вы можете обойти FighterJet :hover.)

3 голосов
/ 18 мая 2015 
//hover for ios
-webkit-tap-highlight-color: #ccc;

Это работает для меня, добавьте в свой CSS элемент, который вы хотите выделить

3 голосов
/ 07 октября 2010

Используете ли вы все псевдоклассы или только один? Если вы используете по крайней мере два, убедитесь, что они в правильном порядке, или они все ломаются: 

a:link
a:visited
a:hover
a:active

.. в таком порядке. Кроме того, если вы просто используете: active, добавьте ссылку: даже если вы ее не стилизируете.

1 голос
/ 19 марта 2017

Я опубликовал инструмент, который должен решить эту проблему для вас.

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

Это должно решить все сразу: https://www.npmjs.com/package/active-touch

Вам необходимо либо назначить свои: активные стили для класса .active, либо выбрать собственное имя класса.По умолчанию скрипт будет работать со всеми элементами ссылок, но вы можете перезаписать его своим собственным массивом селекторов.

Честные, полезные отзывы и благодарные отзывы!

0 голосов
/ 17 апреля 2019

Для тех, кто не хочет использовать ontouchstart, вы можете использовать этот код 

<script>
 document.addEventListener("touchstart", function(){}, true);
</script>
0 голосов
/ 03 марта 2018

Решение состоит в том, чтобы полагаться на :target вместо :active: 

<style> 
a:target { 
    background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>

Стиль будет активирован, когда якорь нацелен на текущий URL, который является устойчивым даже на мобильном телефоне. Недостаток в том, что вам нужна другая ссылка, чтобы очистить ссылку в URL. Полный пример: 

a:target { 
    background-color: red;
}
<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>
Страница:
...