onmousemove Event Not Firing

Question

Ich habe die Antworten in diesem Blog und andere ohne Auflösung durchsucht. Hilfe wird sehr geschätzt.

Ich habe ein onmousemove-Ereignis, das das erste Element in der Liste der Ereignisse zum Auslösen ausführt, aber das zweite Element nicht ausführt. document.getElementById("map_image_africa").onmousemove = maps.redraw; learnPanel.redraw;

Das Problem scheint nicht browserspezifisch zu sein; Es tritt in Chrome und Safari auf. Habe Firefox noch nicht probiert.

In Chrome kann ich die Konsole des Browsers hochziehen und learnPanel.redraw(); ausführen, und es funktioniert wie erwartet. Wenn ich eine Alert-Anweisung zwischen die Anweisungen maps.redraw und learnPanel.redraw im Ereignis onmouseover einfüge, wird die Warnung wie erwartet ausgeführt.

das learnPanel Objekt wird unter

mit dem Code erstellt

 LearnPanel.prototype = new Panel(); 
     LearnPanel.prototype.constructor = LearnPanel; 
     function LearnPanel() { 
     } 
     LearnPanel.prototype.draw = function() { 

      var br_element = document.createElement("br"); 


      /* country name */ 
      if(this.isCountryNamesSelected === "yes") { 
       var temp_label; 
       temp_label = document.createElement("label"); 
       temp_label.classList.add('quiz_question_heading_label'); 
       temp_label.innerHTML = "Country: "; 

       this.flagColumnTab.appendChild(temp_label); 

       this.labelCountryName = document.createElement("label"); 
       this.labelCountryName.id = "country_name"; 
       this.labelCountryName.classList.add('quiz_question_label'); 

       this.flagColumnTab.appendChild(this.labelCountryName); 
       this.flagColumnTab.appendChild(document.createElement("br")); 

      } 
      /* capital */ 
      if(this.isCapitalNamesSelected === "yes") { 
       var temp_label; 
       temp_label = document.createElement("label"); 
       temp_label.classList.add('quiz_question_heading_label'); 
       temp_label.innerHTML = "Capital: "; 

       this.flagColumnTab.appendChild(temp_label); 

       this.labelCapitalName = document.createElement("label"); 
       this.labelCapitalName.id = "capital"; 
       this.labelCapitalName.classList.add('quiz_question_label'); 

       this.flagColumnTab.appendChild(this.labelCapitalName); 
       this.flagColumnTab.appendChild(document.createElement("br")); 

      } 
      /* flag */ 
      if(this.isCountryFlagsSelected === "yes") { 

       this.flagImage = document.createElement("img"); 
       this.flagImage.id = "flag_image"; 
       this.flagImage.src = "/images/flags/_flag.jpeg"; 
       this.flagImage.alt = "flag logo"; 

       this.flagColumnTab.appendChild(this.flagImage); 

       this.flagColumnTab.appendChild(document.createElement("br")); 
       this.flagColumnTab.appendChild(document.createElement("br")); 

      } 


     } 
     LearnPanel.prototype.redraw = function() { 


      alert('redrawing learnPanel'); 
      /* country name */ 
      if(learnPanel.isCountryNamesSelected === "yes") { 
       learnPanel.labelCountryName.innerHTML = maps.getCurrentDisplayCountryDown(); 
      } 
      /* capital */ 
      if(learnPanel.isCapitalNamesSelected === "yes") { 
       learnPanel.labelCapitalName.innerHTML = maps.getCurrentCountryCapitalDown(); 
      } 
      /* flag */ 
      if(learnPanel.isCountryFlagsSelected === "yes") { 
       learnPanel.flagImage.src = "/images/flags/" + maps.getCurrentFlagDown() + "_flag.jpeg"; 
       learnPanel.flagImage.alt = "flag of " + maps.getCurrentFlagDown(); 
      } 
      /* head of state */ 
      /* famous landmark */ 

     } 


     learnPanel = new LearnPanel(); 

Vielen Dank im Voraus für die Hilfe!

Answer 1

Willkommen bei StackOverflow!

Was Sie hier brauchen, ist eine anonyme Funktion. Wenn Sie Funktionen für die Eigenschaft mousemove auf #map_large_africa zuweisen, möchten Sie, dass zwei verschiedene Funktionen auftreten. Leider wegen der Art und Weise haben Sie die folgende Anweisung geschrieben:

`document.getElementById("map_image_africa").onmousemove = maps.redraw; learnPanel.redraw;` 

Es tatsächlich thusly analysiert wird:

document.getElementById("map_image_africa").onmousemove = maps.redraw; 

learnPanel.redraw; 

Sehen Sie das Problem? Das Semikolon dient als das Ende eines Befehls. Die Karte wird auf mousevove neu gezeichnet, aber learnPanel.redraw ist kein Teil der onmousemove Zuweisung, und diese Zeile wird nur einmal ausgeführt, direkt nachdem die onmousemove-Eigenschaft #map_image_africa zugewiesen wurde. Indem Sie es in eine anonymous function umhüllen, können Sie mehr als eine Zeile Javascript gleichzeitig ausführen.

Versuchen Sie Folgendes:

document.getElementById("map_image_africa").onmousemove = function() { 
    maps.redraw(); // note that these lines have() after the method name. 
    learnPanel.redraw(); 
} 

---

Während ich Sie haben, beachten Sie bitte, dass direkt modifizierenden Eigenschaften wie onmousemove und onclick entmutigt werden, und Events sind die bevorzugte Art und Weise mit DOM-Elementen zu interagieren, wie es Javascript von der HTML trennt. für die klare Antwort

document.getElementById("map_image_africa").addEventListener('mousemove', function() { 
    maps.redraw(); 
    learnPanel.redraw(); 
}, false);