HTML "overlay", который позволяет кликам просачиваться к элементам, расположенным за ним

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

Я нашел много информации о модели событий DOM, но ни одна из них не устраняет проблему, когда кнопки и другие "родные" элементы управления, как правило, не получают щелчков в первую очередь.

Ответ 1

Глупый взлом я сделал, чтобы установить высоту элемента в ноль, но переполнение: видимо; комбинируя это с указателями-событиями: none; похоже, охватывает все базы.

.overlay {
    height:0px;
    overflow:visible;
    pointer-events:none;
    background:none !important;
}

Ответ 2

Добавить pointer-events: none; наложение.

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

[Обновление] Именно эта проблема, и именно мое решение только что появилось в этом посте: " Пересылка событий мыши через слои ". Я знаю, что, возможно, уже немного поздно для OP, но ради кого-то, кто столкнется с этой проблемой в будущем, я бы хотел ее включить.

Ответ 3

Для записи альтернативный подход может заключаться в том, чтобы сделать слой с кликабельным наложением: вы сделаете его полупрозрачным, а затем поместите поверх него "накладываемое" изображение (несколько контуитивно, изображение "наложения" может быть непрозрачным). В зависимости от того, что вы пытаетесь сделать, вы вполне можете получить тот же визуальный эффект (изображение и слой с интерактивным доступом, полупрозрачно наложенный друг на друга), избегая при этом проблем с кликабельностью (поскольку "наложение" фактически находится в фоновом режиме).

Ответ 4

В случае, если кто-то еще работает с той же проблемой, единственное решение, которое я смог бы найти, чтобы удовлетворило меня, состояло в том, чтобы покрыть все содержимое, а затем поднять Z-индекс всех элементов, которые можно щелкнуть. Вы не можете нарисовать их, но по крайней мере они доступны для просмотра...

Ответ 5

Моя команда столкнулась с этой проблемой и решила ее очень хорошо.

добавить класс "пересылка" или что-то в каждый элемент, который вы хотите кликать, и который находится под наложением.
для каждого элемента .passthrough добавьте div и поместите его точно поверх своего родителя. добавьте класс "element-overlay" в этот новый div.
"CSS-элемент" наложение элементов "должен иметь высокий индекс z (над наложением страницы), а элементы должны быть прозрачными.

Это должно решить вашу проблему, поскольку события на элементе ".element-overlay" должны появиться до ".passthrough". Если у вас все еще есть проблемы (мы пока ничего не видели), вы можете играть со связыванием.

Это усовершенствование решения @jvenema.

Самое приятное в этом:

вы не проходите через ВСЕ события ко всем элементам. Только те, которые вы хотите. (разрешенный аргумент @jvenema)
Все события будут работать правильно. (например, зависание).

Если у вас возникли проблемы, сообщите мне, чтобы я мог разработать.

Ответ 6

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

Ответ 7

Как правило, это не отличная идея. Принимая ваш сценарий, если у вас были злые намерения, вы можете скрыть все под вашим "наложением". Затем, когда пользователь нажимает на ссылку, которую, как они думают, должен взять их на 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>

Ответ 8

Как насчет этого для IE?:

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

onmouseup: Между тем это событие, которое вы хотели бы запустить.

     //script
     var allclickthrough=[];         
     function hidedivover(){
              if(allclickthrough.length==0){
                allclickthrough=getElementsByClassName(document.body,"clickthrough");// if so .parentNode
                }
              for(var i=0;i<allclickthrough.length;i++){
                 allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)+2000+"px";
                 }
              setTimeout(function(){showdivover()},1000);   
              }
    function showdivover(){
             for(var i=0;i<allclickthrough.length;i++){
                allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)-2000+"px";
                }
             }       
    //html
    <span onmouseup="Dreck_he_got_me()">Click me if you can.</span>
    <div  onmousedown="hidedivover()" style="position:absolute" class="clickthrough">You'll don't get through!</div>

Ответ 9

У меня была эта проблема при просмотре моего веб-сайта по телефону. Пока я пытался закрыть оверлей, я почти нажимал на что-либо под наложением. Решением, которое я нашел для себя, является просто добавить тег a вокруг всего наложения