Всем привет. Странный вопрос - есть ли возможность сделать элемент "невидимым" для мыши? Поясню, есть блок
Ответ
Ну что, решил сам. Спасибо, к сожалению, сказать некому)
Таки пришлось попользовать 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;
}
Комментариев нет:
Отправить комментарий