Вопрос по html, javascript, events, dom – Передавать события мыши через абсолютно позиционированный элемент

266

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

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

Ваш Ответ

6   ответов
33


События-указатели могут быть отключены для родительского элемента (возможно, прозрачного 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>
Круто, сразу после пика открытийpointer-events:none и неизбежное поражение дочерних узлов, вы экономите день :)
;) очень рад этому
Это может быть сведено к просто:.parent * { pointer-events:all; } для детей?
7

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

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

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

Спасибо за ответ, Локтар. К сожалению, на реальной странице я не буду знать, что находится под абсолютно позиционированным элементом, и может быть более одной возможной цели. Единственный обходной путь, о котором я могу подумать, - это захват координат мыши и сравнение их с возможными целями, чтобы увидеть, пересекаются ли они. Это было бы просто противно. s4y
1

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

3

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

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

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

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

422

pointer-events: none;

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

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

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

Вау, это только сэкономило мне часы.
Спасибо, я никогда не знал, что это на самом деле существует. это спасло меня часы
Спасибо! Это идеальное решение для современных (и не IE) браузеров. В тот момент, когда этот вопрос был опубликован, я не думаю,pointer-events существовало! Я могу в какой-то момент переключить принятый ответ на этот. s4y
Я просто переключил принятый ответ на этот. Поддержка дляpointer-events still isn’t super awesome, но это становится лучше. Чтобы получить более совместимый вариант, воспользуйтесь ответом @ JedSchmidt & # x2019 ;. s4y
Спасибо приятель. отличное решение!
45

document.elementFromPoint метод, по:

removing the top layer on mousedown, passing the x and y coordinates from the event to the document.elementFromPoint method to get the element underneath, and then restoring the top layer.
Проблема с этим обходным решением состоит в том, что он не работает с масштабированием страницы. Для мобильных устройств или настольных браузеров масштабирование по координатам X Y больше ничего не значит, и нет четкого способа вычислить масштаб. Я полагаю, что увеличение масштаба на самом деле невозможно.
Круто, я не знал, что этот метод вообще существует! Это может также использоваться довольно легко, чтобы получить все элементы под курсором, используяwhile цикл, чтобы получить самый верхний элемент, а затем скрыть его, чтобы найти следующий. Возьми мою версию здесь:gist.github.com/Pichan/5498404
Более многословное объяснение здесь:vinylfox.com/forwarding-mouse-events-through-layers

Похожие вопросы