Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.05.2012, 13:25
Кандидат Javascript-наук
Отправить личное сообщение для MadGest Посмотреть профиль Найти все сообщения от MadGest
 
Регистрация: 12.07.2010
Сообщений: 123

Проброс событий сквозь div
Два элемента div. Первый расположен fixed прямо над другим div'ом. Как сделать так что бы первый элемент не реагировал на нажатия а второй работал как будто первого нет.
__________________
Не изобретайте велосипед, почитайте мануалы...
Ответить с цитированием
  #2 (permalink)  
Старый 06.05.2012, 13:34
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Отписать блок от событий мыши
Ответить с цитированием
  #3 (permalink)  
Старый 07.05.2012, 10:36
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

Сообщение от MadGest Посмотреть сообщение
Два элемента 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>
Ответить с цитированием
  #4 (permalink)  
Старый 25.05.2012, 10:18
Новичок на форуме
Отправить личное сообщение для CreatOne Посмотреть профиль Найти все сообщения от CreatOne
 
Регистрация: 25.05.2012
Сообщений: 3

А если так: снизу несколько маленьких дивов, а над ними один большой, который закрывает их (в нем находится текст). Но события прописаны для маленьких(у каждого маленького дива свои параметры).
При этом, маленькие дивы имеют цвет, соответственно поменять местами нельзя, иначе не будет виден текст с большого дива.
Можно как-нибудь узнать по какому маленькому диву кликнули и вызвать его событие?
Ответить с цитированием
  #5 (permalink)  
Старый 25.05.2012, 12:15
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от CreatOne Посмотреть сообщение
А если так: снизу несколько маленьких дивов, а над ними один большой, который закрывает их (в нем находится текст). Но события прописаны для маленьких(у каждого маленького дива свои параметры).
При этом, маленькие дивы имеют цвет, соответственно поменять местами нельзя, иначе не будет виден текст с большого дива.
Можно как-нибудь узнать по какому маленькому диву кликнули и вызвать его событие?

При нажатии на верхний div - нижнюю мелочь в прозрачном(transparent) режиме z-index(ом) перемещаем наверх и смотрим событие на конкретном из них при отпускания мыши


Или отследить координаты курсора при клике на верхнем div,
по сообытию анализировать попадения координаты в блок мелких дивов, если попали - тогда бъем посекторно(неких заранее созданный массив) и проверяем попадания координат в соответствующий мелкий div и вызываем его событие -
Ответить с цитированием
  #6 (permalink)  
Старый 25.05.2012, 12:24
Новичок на форуме
Отправить личное сообщение для CreatOne Посмотреть профиль Найти все сообщения от CreatOne
 
Регистрация: 25.05.2012
Сообщений: 3

Сообщение от Deff Посмотреть сообщение
При нажатии на верхний div - нижнюю мелочь в прозрачном(transparent) режиме z-index(ом) перемещаем наверх и смотрим событие на конкретном из них при отпускания мыши


Или отследить координаты курсора при клике на верхнем div,
по сообытию анализировать попадения координаты в блок мелких дивов, если попали - тогда бъем посекторно(неких заранее созданный массив) и проверяем попадания координат в соответствующий мелкий div и вызываем его событие -
Не совсем понял 1 способ
Ответить с цитированием
  #7 (permalink)  
Старый 25.05.2012, 13:42
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от CreatOne Посмотреть сообщение
Не совсем понял 1 способ
Все нижние мелкие div обрамляем общим дивом и приподнимаем этот общий вместе со всеми мелкими по событию mousedown над самым верхним блоком
(для этого у блока обрамления мелких div должно быть в css position:relative, тогда можно изменить css - z-index - для вытаскивания на самый верх

После вытаскивания наверх - уже можно отследить событие mouseup непосредственно в конкретном мелком div

Последний раз редактировалось Deff, 25.05.2012 в 13:45.
Ответить с цитированием
  #8 (permalink)  
Старый 25.05.2012, 13:48
Новичок на форуме
Отправить личное сообщение для CreatOne Посмотреть профиль Найти все сообщения от CreatOne
 
Регистрация: 25.05.2012
Сообщений: 3

Сообщение от Deff Посмотреть сообщение
Все нижние мелкие div обрамляем общим дивом и приподнимаем этот общий вместе со всеми мелкими по событию mousedown над самым верхним блоком
(для этого у блока обрамления мелких div должно быть в css position:relative, тогда можно изменить css - z-index - для вытаскивания на самый верх

После вытаскивания наверх - уже можно отследить событие mouseup непосредственно в конкретном мелком div
OK. Спасибо, попробую
Ответить с цитированием
  #9 (permalink)  
Старый 05.03.2013, 08:54
Новичок на форуме
Отправить личное сообщение для s1mpson Посмотреть профиль Найти все сообщения от s1mpson
 
Регистрация: 05.03.2013
Сообщений: 2

Сообщение от MadGest Посмотреть сообщение
Два элемента div. Первый расположен fixed прямо над другим div'ом. Как сделать так что бы первый элемент не реагировал на нажатия а второй работал как будто первого нет.

Добавьте элементу fixed CSS свойство
pointer-events: none;

и этот элемент будет прозрачен для событий!

Можно делать с событиями много интересного, подробнее здесь:
https://developer.mozilla.org/en-US/...pointer-events
Ответить с цитированием
  #10 (permalink)  
Старый 15.08.2013, 21:26
Аспирант
Отправить личное сообщение для VitAl2013 Посмотреть профиль Найти все сообщения от VitAl2013
 
Регистрация: 27.05.2011
Сообщений: 67

Если есть необходимость выводить таким образом только контекстное меню? Есть img над ней 2 прозрачных div полностью её перекрывающих, прозрачных, их функция ловли левых кликов для листания, но надо дать пользователю возможность сохранять картинку и в идеале дать ему контекстное меню картинки img , а не div-ов. Такое вообще возможно?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
onmouseover/onmouseout bes Общие вопросы Javascript 8 09.04.2012 18:34
проблема с div И animate g00000dman jQuery 2 24.03.2011 23:34
Проблема с load в div и импортом стороннего кода с помощью javascript 1quick1 Events/DOM/Window 9 04.02.2011 13:16
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 19:03
animate, всплывающий div box сделать по центру zero_mod jQuery 1 27.10.2010 00:23