Ereignispropagierung und sprudelnden

Question

Hallo mein HTML-Code ist wie

<div onclick="alert('layer 4');"> 
    <h1>layer 4</h1> 
    <div onclick="alert('layer 3');" > 
     <h1>layer 3</h1> 
     <div onclick="alert('layer 2');"> 
      <h1>layer 2</h1> 
      <div onclick="alert('layer 1');"> 
       <h1>layer 1</h1> 
      </div> 
     </div> 
    </div> 
</div> 

Also, wenn ich die Schicht klicken 1 dann alle Click-Ereignisse für alle 4 Schichten wird wegen Ereignis bubling ausgelöst werden. Wir können die Stop-Propagation verwenden, um das Blubbern zu stoppen. Alles was ich wissen will ist, dass wenn ich auf die Ebene 1 klicke, es möglich ist, die Klick-Funktion der 1. und 2. Ebene zu überspringen, dann die Klick-Funktion der 3. Ebene auszuführen und die Funktion der 4. Ebene zu überspringen? Wie kann ich das machen?

Answer 1

Ich denke, es gibt viele verschiedene Möglichkeiten, dies zu erreichen. Abhängig davon, was passieren soll, wenn Sie auf eine andere Ebene klicken, dann layer 1.

Wie auch immer ich bin nicht sicher, wie es mit Inline-Javascript zu tun. Sie sollten versuchen, es zu vermeiden, da es Wege gibt, aber das sieht kompliziert aus.

Es ist viel einfacher, dem Element ein data Attribut hinzuzufügen und dann ein eventListener für dieses Element hinzuzufügen. Das gibt Ihnen viele Vorteile.

Versuchen Sie diesen Code:

var executeFunctionForLayer = 3; 
 

 
var layers = document.querySelectorAll('[data-layer]'); 
 

 
layers.forEach(function(element, index){ 
 
    element.addEventListener("click", function(event){ 
 
     if(parseInt(element.dataset.layer, 10) === executeFunctionForLayer) { 
 
      // here we do the crazy function stuff 
 
      alert('layer ' + element.dataset.layer); 
 
      
 
      // after this one stop from bubbeling 
 
      event.stopPropagation(); 
 
     } 
 
     event.preventDefault(); // prevent from default 
 
     return; 
 
    }); 
 
    
 
});

<div data-layer="4"> 
 
    <h1>layer 4</h1> 
 
    <div data-layer="3"> 
 
     <h1>layer 3</h1> 
 
     <div data-layer="2"> 
 
      <h1>layer 2</h1> 
 
      <div data-layer="1"> 
 
       <h1>layer 1</h1> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

Hier ist der Beispielcode, um die erforderliche Funktionalität zu erreichen, was ich getan habe, können Sie tun, indem Sie IDs oder Klassen zu entsprechenden Elementen auch bereitstellen.

So untenstehenden Code nach, nur 'Schicht 3' Alarm wird kommen, wenn Sie auf 'Schicht 1' oder Schicht 2' oder 'Schicht 3' klicken -

function showAlert(){ 
 

 
if(event.currentTarget.firstElementChild.textContent=='layer 3') 
 
\t alert(event.currentTarget.firstElementChild.textContent); 
 
}

<div onclick="showAlert()"> 
 
    <h1>layer 4</h1> 
 
    <div onclick="showAlert()" > 
 
     <h1>layer 3</h1> 
 
     <div onclick="showAlert()"> 
 
     <h1>layer 2</h1> 
 
     <div onclick="showAlert()"> 
 
      <h1>layer 1</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>