it-swarm.com.ru

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

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

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

273
s4y
pointer-events: none;

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

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

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

435
JanD

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

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

Также приятно знать ...
События-указатели могут быть отключены для родительского элемента (возможно, прозрачного div) и все же могут быть включены для дочерних элементов. Это полезно, если вы работаете с несколькими перекрывающимися слоями div, где вы хотите иметь возможность щелкать дочерние элементы любого слоя. Для этого все родительские div-ы получают pointer-events: none, а click-children получают указатель-события, которые можно включить с помощью 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>
34
Allisone

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

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

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

7
Loktar

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

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

Вот хранилище Github: https://github.com/BaronVonSmeaton/jquery.forwardevents

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

3
Mikepote

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

1
ricosrealm