onmousemove Evento non attivato

Question

Ho cercato tra le risposte fornite in questo blog e altre senza alcuna risoluzione. L'aiuto è molto apprezzato.

Ho un evento onmousemove che sta eseguendo il primo elemento nell'elenco degli eventi da attivare ma non eseguirà il secondo. document.getElementById("map_image_africa").onmousemove = maps.redraw; learnPanel.redraw;

Il problema non sembra essere specifico del browser; si verifica in Chrome e Safari. Non ho ancora provato Firefox.

In Chrome, posso aprire la console del browser ed eseguire learnPanel.redraw(); e funziona come previsto. Inoltre, se inserisco un'istruzione di avviso tra le istruzioni maps.redraw e learnPanel.redraw nell'evento onmouseover, l'avviso verrà eseguito come previsto.

l'oggetto learnPanel viene creato con il codice qui sotto

 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(); 

Grazie in anticipo per l'aiuto!

Answer 1

Benvenuti in StackOverflow!

Quello che ti serve è una funzione anonima . Quando si assegnano funzioni per la proprietà mousemove su #map_large_africa, si desidera che si verifichino due funzioni distinte. Purtroppo, a causa del modo in cui hanno scritto la seguente dichiarazione:

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

In realtà è analizzato nel seguente modo:

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

learnPanel.redraw; 

Non si vede il problema? Il punto e virgola funge da fine di un comando. La mappa viene ridisegnata su mousemove, ma learnPanel.redraw non fa parte dell'assegnazione onmousemove e tale riga viene eseguita una sola volta, subito dopo la proprietà onmousemove assegnata a #map_image_africa. Se lo si avvolge in un anonymous function, è possibile eseguire più di una riga di javascript alla volta.

provare quanto segue:

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

---

Mentre vi ho, si prega di notare che le proprietà che modificano direttamente come onmousemove e onclick sono scoraggiati, e Events sono il modo migliore per interagire con elementi DOM, come separa javascript dall'HTML.

È possibile che questo onmousemove assegnazione può (e dovrebbe) essere riscritta come tale:

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