Как я могу получить --webkit-tap-highlight-color, чтобы выделить весь DIV?

Question

Я изо всех сил стараюсь, чтобы iPhone OS4 выдавал подсветку крана по умолчанию на DIV в UIWebView (т. Е. Встроенном в приложение, а не в Safari).

Разметка:

<a href="...">
<div class="item">
 <div class="imgWrapper">
   <img...>
 </div>
 <div class="Title">
  Title text
 </div>
</div>
</a>

Я стремлюсь к отображению, которое выглядит как родной вид фотографий - то есть список прокрутки с изображением слева, за которым следует некоторый текст, с записями списка, разделенными тонкой границей. При нажатии в любом месте записи списка должна появиться ссылка - на изображение, текст или пробел между разделителями элементов списка.

Я не могу заменить элемент onclick = location.href = ... в DIV, потому что я использую пользовательскую схему URL для передачи клика обратно в приложение, а location.href = didn не вызывает делегата UIWebView.

Вот что я пробовал до сих пор:

1. Обычный HTML, без CSS - у меня есть выделение касанием, но текст проходит под изображением
2. ширина элемента 320px с плавающей точкой слева, img с плавающей точкой слева - подсветка касания больше не отображается в пробеле или тексте, но появляется на изображении
3. куча других вещей!

Я озадачен тем, как заставить подсветку крана правильно работать с этим HTML - у кого-нибудь есть какие-нибудь идеи / примеры того, как заставить это работать?

Answer 1

Я просто заканчиваю проект мобильного сайта и столкнулся с некоторыми похожими проблемами. Во-первых, я бы пересмотрел вашу HTML-структуру с помощью div внутри якоря. Я не уверен, что соответствует спецификации HTML. Я знаю, что веб-просмотры, сафари и все другие мобильные устройства обрабатывают проверку html по-разному, некоторые более строгие, чем другие, поэтому следите за этим и обязательно проверьте свой тип документа и тип контента. Тип контента все еще жжет меня на страницах. Во-вторых, чтобы заставить работать выделение крана, вы должны поместить его на более высокий узел, и тогда он будет применяться только к якорям, я думаю. так что вы можете сделать что-то подобное на теле с помощью CSS:

body {
    -webkit-tap-highlight-color: #ccc;
}

В-третьих, не могли бы вы попробовать onlick="window.location=your_href;"

Надеюсь, это поможет или даст вам представление о том, на что следует обратить внимание.

Answer 2

Выделение касания показывает элемент, для которого зарегистрирован подмножество событий мыши (например, щелчок, mousedown, mousemove, mouseup и т. Д.) Для элемента.

Вы можете попробовать его на http://www.quirksmode.org/dom/events/tests/click.html или http://www.quirksmode.org/dom/events/tests/mouseover.html (но тест хорошо работает только на iOS5, потому что тестовая форма имеет прокручиваемые области).

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

Answer 3

Я избавился от таких бликов:

body {
    -webkit-tap-highlight-color: transparent;
}