Я пытаюсь захватить события мыши на элементе с другим абсолютно позиционированным элементом поверх него.
Прямо сейчас события в абсолютно позиционированном элементе попадают на него и всплывают до его родителя, но я хочу, чтобы он был «прозрачным» для этих событий мыши и направлял их во все, что за ним стоит. Как мне это реализовать?
pointer-events
существовал! Я могу переключить принятый ответ на этот в какой-то момент.pointer-events
прежнему не супер круто , но становится все лучше. Для более совместимого варианта, воспользуйтесь ответом @ JedSchmidt.Если все, что вам нужно, это mousedown, вы можете обойтись этим
document.elementFromPoint
методом:x
иy
координаты от случая кdocument.elementFromPoint
способу , чтобы получить элемент под ним, а затемисточник
Также приятно знать ...
Pointer-events можно отключить для родительского элемента (возможно, прозрачного div) и все же включить для дочерних элементов. Это полезно, если вы работаете с несколькими перекрывающимися слоями div, где вы хотите иметь возможность щелкать дочерние элементы любого слоя. Для этого все родительские div-ы get
pointer-events: none
и click-children получают указатели-события, которые можно включитьpointer-events: all
источник
pointer-events:none
и неизбежного поражения детей узлами вы спасаете день :).parent * { pointer-events:all; }
для детей?Причина, по которой вы не получаете событие, заключается в том, что абсолютно позиционированный элемент не является потомком элемента, который вы хотите «щелкнуть» (синий div). Самый чистый способ, который я могу придумать, - это поместить абсолютный элемент как дочерний элемент того, на который вы нажали, но я предполагаю, что вы не можете этого сделать, иначе вы бы не разместили этот вопрос здесь :)
Другой вариант - зарегистрировать обработчик события щелчка для абсолютного элемента и вызвать обработчик щелчка для синего элемента div, что приведет к их миганию.
Из-за того, что события происходят в DOM, я не уверен, что для вас есть более простой ответ, но мне очень любопытно, есть ли у кого-нибудь еще какие-то хитрости, о которых я не знаю!
источник
Доступна версия javascript, которая вручную перенаправляет события из одного div в другой.
Я очистил его и превратил в плагин jQuery.
Вот хранилище Github: https://github.com/BaronVonSmeaton/jquery.forwardevents
К сожалению, цель, для которой я его использовал - наложение маски на Google Maps не захватывало события нажатия и перетаскивания, и курсор мыши не менялся, что настолько ухудшало пользовательский опыт, что я просто решил скрыть маску под IE и Opera - два браузера, которые не поддерживают события указателя.
источник
Если вы знаете элементы, для которых нужны события мыши, и если ваше наложение прозрачно, вы можете просто установить для их z-index значение, превышающее наложение. Все события должны, конечно, работать в этом случае во всех браузерах.
источник