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

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

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

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

Ответы

Ответ 1

Да, вы CAN сделаете это.

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

Используя AlphaImageLoader, вы можете даже нанести прозрачный .PNG/.GIF на оверлей 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;

Вот базовая страница примера со всем кодом.

Ответ 2

Также приятно знать... Вы можете отключить указатели-события в родительском элементе (возможно, прозрачном div), но он все еще разрешен для его дочерних элементов.
Это полезно, если вы работаете с несколькими перекрывающимися слоями div, где вы хотите иметь возможность нажимать дочерние элементы, в то время как родительские слои не реагируют на какие-либо события мыши вообще. Для этого все родительские divs получают 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>

Ответ 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-указателя-событий было перенесено из CSS3-UI в CSS4-UI.

Ответ 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.

Ответ 5

Вот polyfill, чтобы pointer-events: none; работал над IE до 11. https://github.com/kmewhort/pointer_events_polyfill

Ответ 6

Скрыть наложение элемента
Определение координат курсора
Получить элемент в этих координатах
Триггер нажмите элемент
Показать повторно наложенный элемент

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

Ответ 7

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

$('.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');
});

Ответ 8

В настоящее время я работаю с воздушными шарами на холсте. Но поскольку баллон с указателем завернут в 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, что означает, что он не щелкнул струей, И переместите этот массив на клик. Вы также можете использовать push.

Чтобы работать с этим массивом:

$("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 --
            }
          });

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

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

Еще одна идея попробовать (ситуационно):

Поместите содержимое, которое вы хотите в div,
Поместите не щелкнув наложение по всей странице с более высоким индексом z,
сделать другую обрезанную копию исходного div
overlay и abs позиционируют копию div в том же месте, что и исходное содержимое, которое вы хотите кликать, с еще более высоким z-индексом?

Любые мысли?

Ответ 12

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

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

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

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

Надеюсь, это поможет. См. здесь для получения дополнительной информации о позиционировании CSS.

Ответ 13

Просто обернуть a тег вокруг всех HTML экстракта, например,

<a href="/categories/1">
  <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
  <div class="caption bg-orange">
    <h2>
      test1
    </h2>
  </div>
</a>

в моем примере мой класс титров имеет эффекты при наведении курсора на события указателя: нет; ты просто проиграешь

Обтекание содержимого сохранит ваши эффекты при наведении, и вы можете нажать на всю картинку, включая div, с уважением!

Ответ 14

Вы можете разместить наложение AP как...

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}

<div id="overlay"></div>

просто переверните туда, где вы не хотите, то есть клик. Работает во всем.

Ответ 15

Я думаю, что event.stopPropagation(); следует упомянуть и здесь. Добавьте это к функции Click вашей кнопки.

Предотвращает всплытие события в DOM-дереве, предотвращая уведомление любых родительских обработчиков о событии.

Ответ 16

Более простым способом было бы встроить прозрачное фоновое изображение, используя URI данных, следующим образом:

.click-through {
    pointer-events: none;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}