“Наложение” HTML, которое позволяет щелчкам падать до элементов позади него [дубликат]
Подробно остановиться на ответе petrilli:
- Ctrl + Numpad_Multiply может также использоваться для расширения всего
- Ctrl + Сдвиг + Numpad_Divide обязан свернуть весь
- Ctrl + переключатели Numpad_Divide , сворачивающиеся на и прочь
И да, они могут все быть восстановлением, если Вы знаете что текст отфильтровать на в Windows | Предпочтения | Общий | Ключи.
"Сворачивание", "Расширьтесь", "Коллапс" ключевые слова, которые должны получить Вас все соответствующие команды.
5 ответов
Добавить pointer-events: none; в оверлей.
Исходный ответ: Я предлагаю вам захватить событие щелчка с наложением , скройте наложение, затем повторно активируйте событие щелчка, затем снова отобразите наложение. Я не уверен, получится ли у вас эффект мерцания.
[Обновление] Именно эта проблема и именно мое решение только что появилось в этом посте: « Перенаправление событий мыши через слои ». Я знаю, что это, вероятно, немного поздно для OP, но ради того, чтобы у кого-то возникла эта проблема в будущем, я бы включил ее.
В общем, это не лучшая идея. Если взять ваш сценарий, если у вас были злые намерения, вы могли бы все скрыть под своим «оверлеем». Затем, когда пользователь нажимает на ссылку, которая, по их мнению, должна привести его на bankofamerica.com, вместо этого запускается скрытая ссылка, которая ведет на myevilsite.com.
Тем не менее, всплытие событий работает, и если это происходит внутри приложения, это не имеет большого значения. Следующий код является примером. При нажатии на синюю область появляется предупреждение, даже если оно установлено в красной области. Обратите внимание, что оранжевая область НЕ работает, потому что событие будет распространяться через элементы PARENT, поэтому ваше наложение должно быть внутри любого элемента, на который вы наблюдаете щелчки. В вашем сценарии вам может не повезти.
<html>
<head>
</head>
<body>
<div id="outer" style="position:absolute;height:50px;width:60px;z-index:1;background-color:red;top:5px;left:5px;" onclick="alert('outer')">
<div id="nested" style="position:absolute;height:50px;width:60px;z-index:2;background-color:blue;top:15px;left:15px;">
</div>
</div>
<div id="separate" style="position:absolute;height:50px;width:60px;z-index:3;background-color:orange;top:25px;left:25px;">
</div>
</body>
</html>
На случай, если кто-то еще столкнется с той же проблемой, единственное решение, которое я смог найти, которое меня удовлетворило, - это все покрыть холстом, а затем поднять Z-индекс всех кликабельных элементов. На них нельзя рисовать, но по крайней мере на них можно нажимать ...
Вы можете использовать оверлей с установленной непрозрачностью, чтобы кнопки / якоря на задней панели оставались видимыми, но если у вас есть этот оверлей поверх элемента, вы не можете щелкнуть по нему.
Для записи альтернативный подход может заключаться в том, чтобы сделать интерактивный слой наложенным: вы сделаете его полупрозрачным, а затем поместите «наложенное» изображение позади его (несколько как ни странно, в этом случае «наложенное» изображение могло быть непрозрачным). В зависимости от того, что вы пытаетесь сделать, вы вполне можете получить точно такой же визуальный эффект (изображения и интерактивного слоя, полупрозрачно наложенного друг на друга), избегая при этом проблем с кликабельностью (потому что "наложение "фактически находится в фоновом режиме).