Dismissing multiple onClick events

Question

I have several divs that are nested together. Each of them has its own onclick event. So, imagine that it’s like a sandwich, the bottom layer is bread (this layer is geographically larger than the one that is embedded inside), then there is a salad, and then a tomato on top.

So it looks like this:

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

Currently, when a user clicks on a tomato, it gives the correct sequence for the tomato, but then everything goes wrong. Because, as soon as he lights up with a tomato, he recursively launches the salad, and then finally the bread.

I assume this does this because technically the DID user clicks inside these divs, but only because a tomato is nested inside them.

, , , , . , , , .

, , div "" , , , .

Answer 1

return false , ... click .

, : quirksmode.org .

Answer 2

, IE, event.stopPropagation(); , IE, event.cancelBubble = true; . event - , .

Answer 3

, , . , , , , . JS AJAX . - "return false" .

, XMLHttpRequest , , .

However, I was able to fix the problem by putting a block level tag (empty) in the div <a>, and then placing my click event in the tag <a>instead <div>.

So, I just changed the code:

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

For this:

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