Страницы

Поиск по вопросам

четверг, 1 ноября 2018 г.

Элемент, “прозрачный” для мыши

Всем привет. Странный вопрос - есть ли возможность сделать элемент "невидимым" для мыши? Поясню, есть блок

, в нем с абсолютным позиционированием. <А> может быть больше или меньше, длиннее или шире
, не важно; нужно, чтобы мышь вообще не замечала этот . Фиддл, красные квадраты - курсор должен быть normal(и клик уходит на либо то, что ниже), зеленые - pointer (и клик уходит на
); text'а быть вообще не должно. Итак, возможно ли и если да, то как? В
могут быть и другие элементы, "поставить прозрачную копию поверх " рассматриваю в последнюю очередь, желательно работать только с . Возможно JS (не jQuery) PS Ноу, ноу хакерз, нужна некликабельная метка на карту, произвольных размеров, которая может залезать на другие регионы и не накрывать их. UPD: для непонимающих) Нужно сделать так, чтобы элемент (div, a - не важно) отображался, но для мыши не существовал: клики проходят насквозь, события onmouse* не происходят, курсор не изменяется. А в фиддле (выше) красные и зеленые квадраты - это положения мыши и реакция на них. Теперь лучше? UPD примерно так оно должно себя вести, но без слоев #overlay1/2


Ответ

Ну что, решил сам. Спасибо, к сожалению, сказать некому)
Таки пришлось попользовать jQuery из-за ленивости перепиливания $.trigger и $.css.
Решение (fiddle)
Алгоритм примерно такой:
вешаем на ссылку все мышиные события в их обработчике скрываем ссылку, получаем нижний элемент с помощью божественной функции document.elementFromPoint и перекидываем событие на него копируем в ссылку стиль курсора нижнего элемента (если он auto - ставим default) показываем ссылку обрываем событие ссылки профит, как говорится
Возможно, кому-то понадобится - штука весьма юзабельна на гео-картах и для разного рода всплывающих подсказок.
ЗЫ: если заморачиваться - курсор надо выставлять в зависимости от типа нижнего элемента - pointer для ссылки, text для текстовых полей и т.д. Но мне, честно, просто было лень, свою задачу я решил)
Дублирую fiddle, вариант для изучения
function passEventLower(e) { e.preventDefault(); e.stopPropagation(); var $el = $(document.elementFromPoint(e.pageX, e.pageY)); var c = $el.css('cursor') || 'default'; if (c == 'auto') c = 'default'; $(e.target).css('cursor', c); $el.trigger(e.type); } $('html *:not(#a1)').on('click', function(e) { console.log(this.tagName, e.type); }); $('#a1').on('mousedown mouseup click mousemove', function(e) { var $a = $(this); $a.hide(); passEventLower(e); $a.show(); return false; }); #d1 { position: absolute; width: 100px; height: 100px; background: #eee; cursor: pointer; overflow: show; } #a1 { display; block; position: absolute; white-space: nowrap; line-height: 30px; margin: 30px 0px 0px 10px; cursor: default; }


Комментариев нет:

Отправить комментарий