Есть ли обходной путь для браузера Android-браузера с CSS-позицией и интерактивными областями?

Если у вас есть интерактивное содержимое, такое как <a>, <input> или <area>, и перед этим у вас есть абсолютно позиционированный элемент с большим z-индексом, происходит неправильное поведение "click-through". < ш > Я нажимаю на область, где элемент, находящийся за кликом, находится за передним элементом. В других браузерах есть правильное поведение, когда клик не проходит через передний элемент. Но только в Android-браузере вы можете щелкнуть через передний элемент и активировать элемент позади. Это известная ошибка, и вы не можете ее избежать. Это даже в более новых версиях (я тестирую 2.3.3 в официальном эмуляторе Android).

В некоторых форумах описаны некоторые обходные пути, но ни один из них не работал у меня.

  • Я попытался установить <iframe> или <a> между передней и задней частью
  • Я попытался изменить DOM, поэтому, возможно, состояние браузеров обновлено
  • Я попытался позиционировать задние элементы Ничего не работает.

У меня особенно возникают проблемы с элементами области карты изображения.

У кого-то была такая же проблема и удалось обойти это? Меня особенно интересуют решения, которые протестированы против карт изображений.

ОТВЕТЫ

Ответ 1

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

yourElementClass:focus, yourElementClass:hover {
    pointer-events: none;
}

Ответ 2

Мне интересно о нескольких вещах здесь. Во-первых, какова цель иметь наложенное изображение и использовать карты изображений? Я вижу, что вы включаете jQuery - можете ли вы использовать событие hover с jQuery, чтобы изменить ориентацию изображений и выполнить обмен? Как насчет прикрепления к событию клика для карты изображения и проверки, открыт ли лайтбокс. Если это так, то return false;.

Просто пытаюсь задуматься. Иногда может быть полезно другое занятие.

Ответ 3

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

  • указанный элемент имеет фон: rgba (0,0,0,0.1);
  • вам следует поместить gif или png в качестве фона вышеуказанного элемента (а также цвет фона в качестве точки 1).
  • использование thouchstart вместо щелчка по мере того, как событие привязки иногда помогает.

фактическая версия Android и браузера не затрагивается этой ошибкой (или, по крайней мере, это никогда не случается со мной), но было бы неплохо узнать затронутые версии. Если у кого-то есть список.