Проброс событий сквозь div
Два элемента div. Первый расположен fixed прямо над другим div'ом. Как сделать так что бы первый элемент не реагировал на нажатия а второй работал как будто первого нет.
|
|
Цитата:
на jquery для быстроты кликните по нижнему либо по верхнему элементу
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<meta charset=utf-8 />
<title>test</title>
<style>
div {
width: 200px;
height: 150px;
background: silver;
border: 1px solid;
}
.top {
position: fixed;
left: 40px; top: 20px;
width: 100px;
height: 100px;
}
.hot {
background: red;
}
</style>
<script>
$(function () {
$('.top').on('click', function (e) {
$('.bottom').trigger(e);
});
$('.bottom').on('click', function () {
$(this).toggleClass('hot');
});
});
</script>
</head>
<body>
<div class=bottom>нижний</div>
<div class=top>верхний</div>
</body>
</html>
|
А если так: снизу несколько маленьких дивов, а над ними один большой, который закрывает их (в нем находится текст). Но события прописаны для маленьких(у каждого маленького дива свои параметры).
При этом, маленькие дивы имеют цвет, соответственно поменять местами нельзя, иначе не будет виден текст с большого дива. Можно как-нибудь узнать по какому маленькому диву кликнули и вызвать его событие? |
Цитата:
При нажатии на верхний div - нижнюю мелочь в прозрачном(transparent) режиме z-index(ом) перемещаем наверх и смотрим событие на конкретном из них при отпускания мыши Или отследить координаты курсора при клике на верхнем div, по сообытию анализировать попадения координаты в блок мелких дивов, если попали - тогда бъем посекторно(неких заранее созданный массив) и проверяем попадания координат в соответствующий мелкий div и вызываем его событие - |
Цитата:
|
Цитата:
(для этого у блока обрамления мелких div должно быть в css position:relative, тогда можно изменить css - z-index - для вытаскивания на самый верх После вытаскивания наверх - уже можно отследить событие mouseup непосредственно в конкретном мелком div |
Цитата:
|
Цитата:
Добавьте элементу fixed CSS свойство pointer-events: none; и этот элемент будет прозрачен для событий! Можно делать с событиями много интересного, подробнее здесь: https://developer.mozilla.org/en-US/...pointer-events |
Если есть необходимость выводить таким образом только контекстное меню? Есть img над ней 2 прозрачных div полностью её перекрывающих, прозрачных, их функция ловли левых кликов для листания, но надо дать пользователю возможность сохранять картинку и в идеале дать ему контекстное меню картинки img , а не div-ов. Такое вообще возможно?
|
| Часовой пояс GMT +3, время: 17:18. |