Javascript-Klick auf untergeordnetes Element verhindern

Question

Okay, eine einfache Frage:

<div onclick="javascript:manualToggle(this)">
    <span>Allowed to click</span>
    <span>Not allowed to click</span>
    <span>Allowed to click</span>
</div>

Ohne Replizieren der manualToggle auf die 2 Spans, die erlaubt sind, klicken, wie kann ich verhindern, dass die "Nicht erlaubt zu klicken" span von Auslösen es übergeordnete div onclick-Ereignis, wenn es angeklickt wird?

Answer 1

Mögliche Lösung: Geben Sie die IDs der Bereiche an und prüfen Sie, ob die angeklickte ID in Ihrer Funktion angeklickt werden darf.

schlechte Idee: Sie wissen nicht, welche Spanne geklickt wird, da Sie die Funktion von Ihrem div aufrufen...

Answer 2

<div onclick="manualToggle(this)">
    <span>Allowed to click</span>
    <span>Not allowed to click</span>
    <span>Allowed to click</span>
</div>
<script>
    function manualToggle(cur){
      if(cur !== event.target) return false;

       //CODE
    }
</script>

Hier haben wir ein Klick-Ereignis auf div-Tag gesetzt, und wir übergeben das aktuelle Element (div) als Parameter

innerhalb der Funktion manualToggle haben Sie das Element in params, in dem Sie das Ereignis festgelegt haben,

innerhalb der Funktion haben wir event (ein globales var-Objekt), wo Sie das angeklickte Element (event.target) erhalten können,

wenn das angeklickte Element nicht mit dem Element übereinstimmt, für das wir das Ereignis festgelegt haben, wird nichts unternommen.

es gibt auch noch andere Methoden, z.B. stopPropagation

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation