Перейдите через div к базовым элементам

Question

У меня есть div, который имеет background:transparent вместе с border.Под этим div у меня есть больше элементов.

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

Я хочу, чтобы можно было щелкнуть по этому div, чтобы я мог нажимать на базовые элементы.

Answer 1

Да, вы МОЖЕТЕ сделать это.

Используя pointer-events: none вместе с условными операторами CSS для IE11 (не работает в IE10 или ниже), вы можете получить кросс-браузерное совместимое решение для этой проблемы.

Используя AlphaImageLoader, вы даже можете поместить прозрачные .PNG/.GIF s в оверлей div, и клики будут перетекать на элементы внизу.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 условно:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Вот базовый пример со всем кодом.

Answer 2

Также приятно знать ...
Вы можете отключить события указателя в родительском элементе (возможно, в прозрачном div), но включить его для дочерних элементов.
Это полезно, если вы работаете с несколькими перекрытиямислои div, где вы хотите иметь возможность щелкать дочерние элементы, в то время как родительские слои вообще не реагируют на события мыши.Для этого все родительские div-ы получают pointer-events: none, а его кликабельные дочерние элементы получают события-указатели, повторно включаемые pointer-events: auto

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:auto;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

Answer 3

Клик через DIV к базовому элементу работает по-разному в браузерах.Opera нуждается в ручной пересылке событий, Firefox и Chrome понимают CSS pointer-events:none;, а IE ничего не нужно с прозрачным фоном;например, background:white; opacity:0; filter:Alpha(opacity=0); IE нужно пересылать как Opera.

См. Тест пересылки в http://jsfiddle.net/vovcat/wf25Q/1/ и http://caniuse.com/pointer-events. Свойство CSS Pointer-events было перемещено из CSS3-UI в CSS4-UI.

Answer 4

Я добавляю этот ответ, потому что я не увидел его здесь полностью. Я смог сделать это с помощью elementFromPoint. Итак, в основном:

• прикрепите клик к элементу, через который вы хотите кликнуть
• скрыть
• определить, на каком элементе находится указатель
• выстрелить клик на элемент там.

var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

В моем случае наложенный div абсолютно позиционирован - я не уверен, что это имеет значение. Это работает как минимум на IE8 / 9, Safari Chrome и Firefox.

Answer 5

1. Скрыть наложение элемента
2. Определить координаты курсора
3. Получить элемент по этим координатам
4. Триггерный клик по элементу
5. Снова показать наложенный элемент

    $('#elementontop).click(function (e) {
        $('#elementontop).hide();
        $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
        $('#elementontop').show();
    });

Answer 6

Мне нужно было это сделать, и я решил пойти по этому маршруту:

$('.overlay').click(function(e){
    var left = $(window).scrollLeft();
    var top = $(window).scrollTop();

    //hide the overlay for now so the document can find the underlying elements
    $(this).css('display','none');
    //use the current scroll position to deduct from the click position
    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
    //show the overlay again
    $(this).css('display','block');
});

Answer 7

В настоящее время я работаю с речевыми шариками. Но поскольку всплывающая подсказка с указателем обернута в элемент div, некоторые ссылки под ним больше не доступны. Я не могу использовать extjs в этом случае. См. Базовый пример для моего учебного пособия требует HTML5

Итак, я решил собрать все координаты ссылок внутри шариков в массиве.

var clickarray=[];
function getcoo(thatdiv){
         thatdiv.find(".link").each(function(){
                 var offset=$(this).offset();           
                 clickarray.unshift([(offset.left),
                                     (offset.top),
                                     (offset.left+$(this).width()),
                                     (offset.top+$(this).height()),
                                     ($(this).attr('name')),
                                     1]);
                                     });
         }

Я вызываю эту функцию на каждом (новом) шарике. Он захватывает координаты левого / верхнего и правого / нижнего углов link.class - дополнительно атрибут name для того, что делать, если кто-то нажимает на эти координаты, и я любил устанавливать 1, что означает, что он не был нажат , И отмените этот массив на clickarray. Вы также можете использовать толчок.

Для работы с этим массивом:

$("body").click(function(event){
          event.preventDefault();//if it is a a-tag
          var x=event.pageX;
          var y=event.pageY;
          var job="";
          for(var i in clickarray){
              if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
                 job=clickarray[i][4];
                 clickarray[i][5]=0;//set to allready clicked
                 break;
                }
             }
          if(job.length>0){   
             // --do some thing with the job --
            }
          });

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

Answer 8

Еще одна идея (ситуативно) заключается в следующем:

1. Поместите нужный контент в div;
2. Поместите оверлей без щелчка по всей странице с помощьюz-index выше,
3. сделать еще одну обрезанную копию исходного div
4. с наложением и abs расположить копию div в том же месте, что и исходный контент, на который вы хотите кликать, с еще большим z-индекс?

Есть мысли?

Answer 9

Нет, вы не можете нажать «через» элемент. Вы можете получить координаты щелчка и попытаться выяснить, какой элемент находился под элементом, по которому щелкнули, но это действительно утомительно для браузеров, которые не имеют document.elementFromPoint. Тогда вам все равно придется эмулировать действие по умолчанию, заключающееся в щелчке, которое не обязательно тривиально в зависимости от того, какие элементы у вас там.

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

Answer 10

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

область, занятая элементом, может быть найдена путем определения местоположения элемента относительно левого верхнего угластраницы, и 2. ширина и высота.библиотека типа jQuery делает это довольно простым, хотя это можно сделать простым js.добавление обработчика событий для mousemove на объект document обеспечит непрерывное обновление позиции мыши сверху и слева страницы.решение, находится ли мышь над каким-либо заданным объектом, состоит в проверке, находится ли положение мыши между левым, правым, верхним и нижним краями элемента.