Запуск нескольких событий onClick

Question

У меня есть несколько div, которые вложены друг в друга.У каждого есть свое событие onclick.Итак, представьте, что это как бутерброд, нижний слой - хлеб (этот слой географически больше, чем те, которые вложены в него), затем салат, а затем помидор сверху.

Итак, это выглядит так:

---------------------------
| Bread                   |
|                         |
| ----------------------- |
| | Lettuce             | |
| |                     | |
| | ------------------- | |
| | |Tomato           | | |
| | |                 | | |
| | |   <*click>      | | |
| | |                 | | |
| | |                 | | |
| | ------------------- | |
| ----------------------- |
---------------------------

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

Я полагаю, это происходит потому, что технически пользователь нажимал внутри этих элементов, но только потому, что помидор вложен в них.

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

Итак, мой вопрос заключается в том, можно ли сделать div "непрозрачными" для кликовтак что, несмотря на то, что они вложены друг в друга, учитывается только тот, который был фактически нажат.

Answer 1

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

Я бы предложилследующее чтение для лучшего понимания того, что происходит: превосходное объяснение quirksmode.org объяснения всплывающих событий .

Answer 2

Привет, ребята, спасибо за помощь.К сожалению, я думаю, что я мог случайно упустить важную часть информации.В этом случае JS фактически запускает запрос AJAX на сервер.Таким образом, по какой-то причине в ситуации такого типа «return false» в обработчике событий не работает.

Я подозреваю, что вызов XMLHttpRequest к серверу, вероятно, был выполнен одновременно.

Однако я смог решить проблему, поместив тег div (пустой) <a> внутри элемента div, а затем поместив событие click на тег <a> вместо <div>.

Так что я просто изменил код с этого:

<div class='container' id='idstring' onclick="ajaxcall(parameters)">
  <? server-side call to recursive function ?>
</div>

На это:

<div class='container' id='idstring'><a onclick="ajaxcall(parameters)">
  <? server-side call to recursive function ?>
</a></div>

Answer 3

В браузерах, отличных от IE, event.stopPropagation(); остановит всплывающее событие на родительские узлы, в IE, event.cancelBubble = true; сделает свое дело event - аргумент, передаваемый слушателю.