Передача событий мыши через элемент с абсолютно позиционированием

Я пытаюсь захватить события мыши над элементом с другим абсолютно позиционированным элементом поверх него.

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

ОТВЕТЫ

Ответ 1

pointer-events:none;

Является css-свойством, которое заставляет события "проходить" через DOM-элемент, к которому он применяется, и делает событие происходящим на элементе "ниже".

Подробнее см. https://developer.mozilla.org/en/css/pointer-events

Он не поддерживается до IE 11; все остальные производители поддерживают его с некоторого времени (глобальная поддержка была ~ 92% в 12/'16): http://caniuse.com/#feat=pointer-events (благодаря @Sidnicious для предоставления ссылки в комментариях)

Ответ 2

Если все, что вам нужно, это mousedown, вы можете сделать это с помощью document.elementFromPoint методом:

  • удаление верхнего слоя на mousedown,
  • передавая координаты x и y из события в метод document.elementFromPoint, чтобы получить элемент под ним, а затем
  • восстановление верхнего уровня.

Ответ 3

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

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

<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>

Ответ 4

Причина, по которой вы не получаете событие, состоит в том, что абсолютно позиционированный элемент не является дочерним элементом элемента, который вы хотите использовать "click" (синий div). Самый чистый способ, который я могу придумать, состоит в том, чтобы поместить абсолютный элемент в дочерний элемент того, который вы хотите щелкнуть, но я предполагаю, что вы не можете этого сделать или вы не разместили бы этот вопрос здесь:)

Другой вариант - зарегистрировать обработчик события щелчка для элемента absolute и вызвать обработчик кликов для синего div, заставляя их оба мигать.

Из-за того, как события проходят через DOM, я не уверен, что для вас есть более простой ответ, но мне очень любопытно, есть ли у кого-нибудь какие-либо трюки, о которых я не знаю!

Ответ 5

Доступна версия javascript, которая вручную перенаправляет события из одного div в другой.

Я очистил его и превратил в плагин jQuery.

Здесь репозиторий Github: https://github.com/BaronVonSmeaton/jquery.forwardevents

К сожалению, цель, которую я использовал для - наложения маски поверх Карт Google, не фиксировала события перетаскивания и перетаскивания, а курсор мыши не менял, что ухудшает работу пользователя достаточно, что я просто решил скрыть маску под IE и Opera - два браузера, которые не поддерживают события указателя.

Ответ 6

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