Отключить: активный псевдокласс на слоях z-index

Я разрабатываю мобильное веб-приложение, и я немного запутался: у меня есть один div с именем UpperDiv с z-индексом 50, а под этим div есть другой, называемый UnderDiv с z-index 0. Проблема в том, что когда я «нажимаю» на UpperDiv, он активирует псевдокласс :active для элемента (где я щелкнул) моего UnderDiv. Что я должен сделать, чтобы отключить это?

----------------------------- ОТРЕДАКТИРОВАНО -------------------- ------------

Наконец-то работает!!!!

Я забыл упомянуть, что я использую переход, чтобы открыть/закрыть свой UpperDiv. Итак, при открытии я использую:

$('#myDiv').css('-webkit-transform', 'translate3d(200px, 0px, 0px)').bind('webkitTransitionEnd', function(){
  $('.underDiv').css('pointer-events', 'none');
});

И когда я закрываю:

$('#myDiv').css('-webkit-transform', 'translate3d(0px, 0px, 0px)').bind('webkitTransitionEnd', function(){
  $('.underDiv').css('pointer-events', 'auto');
});

У меня это работает нормально, если это может помочь кому-то еще...


javascript css click-through
person user2436506    schedule 23.09.2013    source источник
comment
Да, это на Android   -  person user2436506    schedule 23.09.2013

Ответы (1)


arrow_upward
0
arrow_downward

Если это на Android, это будет похоже на этот вопрос

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

Это ошибка в браузере Android (и только там), которая возникает, когда вы меняете DOM страницы вместе с некоторым стекированием z-index. Слои ниже будут целевыми для щелчков мышью, даже если что-то наложено поверх них.

Есть несколько обходных путей по вышеуказанному вопросу, которые могут сработать для вас.

Я читал об использовании пустого флэш-ролика с z-индексом 20 между двумя div.

Вот еще один вопрос, на который может быть ответ Android Webkit: абсолютно позиционировано элементы не учитывают z-индекс

на странице проблемы в google есть обходной путь от какого-то разработчика. https://code.google.com/p/android/issues/detail?id=6721#c26

Проблема в том, что если вы измените CSS элемента HTML (например, display), браузер Android не будет отслеживать изменения пользовательского интерфейса так же, как если бы DOM был изменен. Изменение и активные области пользовательского интерфейса не синхронизируются должным образом только за счет изменения CSS. Они были бы путем изменения DOM.

Поэтому, если вы отображаете слой высоты z-index с изменениями в CSS, измените DOM этого слоя соответствующим образом. Это включает в себя некоторую тарабарщину в некоторых атрибутах данных.

Комментарий https://code.google.com/p/android/issues/detail?id=6721#c55 тоже может иметь решения

person yunzen    schedule 23.09.2013
comment
Спасибо за ваш ответ! Я пытался использовать pointer-events: none для элемента, который не следует нажимать, но он не работает :( - person user2436506; 23.09.2013
comment
Еще раз спасибо. Я пробовал многие из решений, предложенных на странице проблемы, но это все то же самое... Жаль, что команда Android еще не исправила проблему. - person user2436506; 23.09.2013