Mehrere onClick-Ereignisse werden ausgelöst

Question

Ich habe mehrere Divs, die ineinander verschachtelt sind. Jedes hat sein eigenes onclick-Ereignis. Also, stellen Sie sich vor, dass es wie ein Sandwich ist, die untere Schicht ist Brot (diese Schicht ist geographisch größer als die, die innerhalb verschachtelt sind), dann gibt es Salat und dann Tomate oben.

Es sieht also folgendermaßen aus:

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

Wenn der Benutzer derzeit auf die Tomate klickt, wird die richtige Sequenz für die Tomate ausgelöst, aber dann geht es schief. Denn sobald die Tomate abgefeuert wird, wird rekursiv der Salat abgefeuert und dann schließlich das Brot.

Ich nehme an, es tut dies, weil technisch der Benutzer DID klicken innerhalb dieser divs, sondern nur, weil Tomate ist innerhalb von ihnen verschachtelt.

Die Art und Weise, wie sie sollte Wenn der Benutzer auf den Teil "Tomate" des Sandwiches klickt, sollte nur das Ereignis "Tomate" ausgelöst werden. Wenn der Benutzer hingegen auf den Salatteil klickt, der hinter der Tomate hervorschaut, dann sollte das Ereignis "Salat" ausgelöst werden.

Also, meine Frage ist, ob es möglich ist, die Divs "undurchsichtig" für Klicks zu machen, so dass, obwohl sie ineinander verschachtelt sind, nur die eine, die tatsächlich angeklickt wurde zählt.

Answer 1

Sie können eine return false nach Ihrem aktuellen Handler-Code, um zu verhindern, dass der Klick von Blasenbildung oder Ausbreitung ... das ist, was die Ursachen der click Ereignisse auf den übergeordneten Elementen.

Ich empfehle die folgende Lektüre, um besser zu verstehen, was passiert: quirksmode.org's ausgezeichnete Erklärung von Event Bubbling .

Answer 2

In Nicht-IE-Browsern event.stopPropagation(); verhindert im IE, dass das Ereignis auf übergeordnete Knoten übergreift, event.cancelBubble = true; sollte das genügen. event ist das Argument, das an den Hörer übergeben wird.

Answer 3

Hallo Leute, danke für die Hilfe. Leider glaube ich, dass ich versehentlich eine wichtige Information ausgelassen haben könnte. Die JS in diesem Fall ist eigentlich Abfeuern einer AJAX-Anfrage zurück an den Server. Also, aus irgendeinem Grund in dieser Art von Situation die "return false" auf die Event-Handler nicht funktioniert.

Ich vermute, dass der XMLHttpRequest-Aufruf an den Server wahrscheinlich alle zur gleichen Zeit ausgelöst wurde.

Ich konnte das Problem jedoch beheben, indem ich eine (leere) Blockebene <a> Tag innerhalb des div, und dann mein Klick-Ereignis auf die <a> <div> .

Also habe ich den Code einfach geändert:

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

Zu diesem:

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