Как заставить событие проходить через видимый элемент DOM - PullRequest
Новая
       5

Как заставить событие проходить через видимый элемент DOM

1 голос
/ 29 декабря 2010

Дайте нам этот код: 

<div id="outer_container">
  <div id="inner_child_1"></div>
  <div id="inner_child_2"></div>
</div>

div#outer_container
{
  position: relative;
  width: 200px;
  height: 200px;
  background-color: green;
}

div#inner_child_1
{
  position: absolute;
  z-index: 1
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
}

div#inner_child_2
{
  position: absolute;
  z-index: 2
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: blue;
}

Когда мы делаем щелчок, например, на верхнем слое inner_child_2, событие будет распространяться на все обработчики событий, зарегистрированные для inner_child_2 и его родительского external_container. Не для inner_child_1, несмотря на то, что он находится непосредственно под inner_child_2. Это по спецификации. Все современные браузеры делают это.

Мой вопрос такой:

Как сделать так, чтобы событие проходило через inner_child_2 и достигало inner_child_1, кроме того, что inner_child_1 было невидимым, или изменяло его z-индекс? (Или прозрачный, но это будет работать только в IE8)

Я думал о том, чтобы инициировать событие самостоятельно в некотором коде обработчика, зарегистрированном в inner_child_2. Но в реальном случае использования я не знаю, куда отправить событие, как показано ниже: inner_child_2, есть несколько элементов, размеченных непредсказуемым образом, и я хочу, чтобы каждый получал события, как если бы inner_child_2 там не было. В идеале я хочу иметь возможность выборочно пропустить некоторые события, не допуская других.

Я знаю, что это сложный вопрос, но я буду признателен за любые предложения

1 Ответ

3 голосов
/ 29 декабря 2010

Одним из способов будет использование восходящего подхода:

В родительском контейнере вы обработаете событие click, затем выполните итерации по его дочерним элементам и сравните координаты клика с относительными границамикаждый ребенок.Если щелчок находится в пределах границ, щелчок должен был инициироваться там, поэтому вручную инициируйте событие click для этого дочернего элемента.

...