Zwei addEventListener-Funktionen auf zwei verschiedenen Elementen

Ich vielleicht meine Murmeln hier verlieren, aber ich fühle mich wie das ist ziemlich einfach JavaScript. Aus irgendeinem Grund löst der erste addEventListener-Aufruf des Elements #recipes die Anweisungen sowohl im ersten als auch im zweiten Ereignishandler aus, und der zweite Ereignishandler funktioniert überhaupt nicht.Zwei addEventListener-Funktionen auf zwei verschiedenen Elementen

var recipes = document.getElementById('recipes'); 
var close_heart = document.getElementById('close_heart'); 
var recipes_container = document.getElementById('recipes_container'); 

recipes.addEventListener('click', function(){ 
    recipes_container.style.display = 'block'; 
}); 

close_heart.addEventListener('click', function(){ 
    recipes_container.style.display = 'none'; 
}); 

<div id="recipes"><a href="#" id="close_heart"><span>Recipes</span></a></div> 
    <section id="recipes_container"><a href="#" class="fa fa-gittip"></a> 
    <h1>Real Mac &amp; Cheese</h1> 
     <ul> 
     <li>Rule #1 &ndash; Use only real cheese (no powdered cheese ever!)</li> 
     <li>Rule #2 &ndash; Use multiple cheese-type varieties (ex: sharp cheddar, monterey jack, bleu)</li> 
     <li>Rule #3 &ndash; Choose an extra protein like bacon to liven it up!</li> 
     </ul> 
    </section> 
</div>

Vielen Dank.

Quelle

2017-07-25 Gray Spectrum

Bitte teilen Sie die HTML – RahulB

Ich bin zu peinlich. –

Ohne Ihre HTML kann ich nur spekulieren, aber ich würde wetten, dass das, was Sie begegnen, Ereignis sprudelt.

#recipes kapselt wahrscheinlich #close_heart, so dass ein click auf #close_heart perlt und lösen die click Ereignishandler für #recipes auch.

Sie können .stopPropagation() verwenden, um dieses Problem zu beheben. Dadurch wird verhindert, dass das Ereignis das DOM sprudelt und click Event-Handler für übergeordnete Elemente auslöst.

recipes.addEventListener('click', function(event){ 
    event.stopPropagation(); 
    recipes_container.style.display = 'block'; 
}); 

close_heart.addEventListener('click', function(event){ 
    event.stopPropagation(); 
    recipes_container.style.display = 'none'; 
});

Hier ist eine andere Frage Stackoverflow eine hilfreiche Erklärung Ereignis zu erfassen und Ereignis sprudeln: What is event bubbling and capturing?

Edit: Jetzt, wo Sie Ihre HTML aufgenommen haben, kann ich sehen, dass ist in der Tat ein Problem.

Quelle

2017-07-25 04:35:27

Es ist das HTML. Ich war sorglos. Soll ich die Frage einfach löschen? –

Entschuldigen Sie die Zeit zu verschwenden. –

@GraySpectrum Nein, es ist eine sehr gültige Frage. Event-Bubbling ist ein kniffliges Konzept, um es zunächst zu begreifen - oder sogar zu realisieren, dass selbst Event-Bubbling existiert. Ich würde vorschlagen, dass Sie Ihre Frage mit dem HTML-Code für '# recipes' und' # close_heart' aktualisieren, um es vollständiger zu machen. –

Ich habe einfach ein ID-Attribut verlegt. Die close_heart-ID sollte in das Ankerelement eingefügt werden, das im Abschnitt verschachtelt ist.

Quelle

2017-07-25 04:43:17

Sie haben auch ein Problem mit Event-Bubbling. Jeder 'Klick' auf' # close_heart' löst auch den 'click' Event-Handler für' # recipes' aus. Meine Antwort zeigt Ihnen, wie Sie das Problem beheben können. –

Ich verstehe. Da das #close_heart-Element im #recipes-Div verschachtelt ist, wird das click-Ereignis standardmäßig eingeblendet und löst das Ereignis im #recipes-div aus. Danke, dass du mich dabei unterstützt hast. Ich habe mich vorher mit diesem Konzept auseinandergesetzt und dieses Beispiel hat es viel klarer gemacht. –

Sie sind herzlich willkommen :) –

Vielleicht fehlt es Ihnen, den Elementen eine richtige ID zuzuweisen. Überprüfen Sie den folgenden Code, sollte es auch für Ihren Fall funktionieren:

<html> 
    <head> 
     <title> The Title </title> 
    </head> 
    <body> 

     <button id="recipes"> Recipes </button> 
     <button id="close_heart"> Close_heart </button> 
     <h1 id="recipes_container"> Recipes Container </h1> 

     <script> 
      var recipes = document.getElementById('recipes'); 
      var close_heart = document.getElementById('close_heart'); 
      var recipes_container = 
      document.getElementById('recipes_container'); 

      recipes.addEventListener('click', function(){ 
       recipes_container.style.color = "blue"; 
      }); 

      close_heart.addEventListener('click', function(){ 
       recipes_container.style.color = "orange"; 
      }); 
     </script> 
    </body> 
</html>

Quelle

2017-07-25 04:46:23 Reza

Danke Reza. Es war tatsächlich so, aber es gab noch ein weiteres Problem von Event-Sprudeln, das Elliot B. so freundlich war, darauf hinzuweisen und zu erklären. –

Zwei addEventListener-Funktionen auf zwei verschiedenen Elementen

Antwort

Verwandte Themen