onmousemoveイベントが発射されない

Question

私はこのブログやその他の解決策を何も解決せずに答えを探しました。ヘルプは非常に高く評価されます。

私はonmousemoveイベントが発生するイベントのリストの最初のアイテムを実行していますが、2番目のイベントは実行しません。 document.getElementById("map_image_africa").onmousemove = maps.redraw; learnPanel.redraw;

問題はブラウザ固有のものではありません。 ChromeとSafariで発生します。まだFirefoxを試してみませんか？

Chromeでは、ブラウザのコンソールをプルアップしてlearnPanel.redraw();を実行すると、期待どおりに動作します。 また、onmouseoverイベントのmaps.redrawステートメントとlearnPanel.redrawステートメントの間にアラートステートメントを置くと、アラートが期待通りに実行されます。

learnPanelオブジェクトが助けを事前に

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

おかげで以下のコードを使用して作成されました！

Answer 1

ようこそStackOverflow！

ここに必要なものは匿名機能です。 #map_large_africaのmousemoveプロパティの関数を割り当てるときは、2つの異なる関数が必要です。残念ながら、あなたは次の文を書かれている方法で：

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

それは実際にthusly解析されます。

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

learnPanel.redraw; 

をあなたが問題を参照していますか？セミコロンはコマンドの終わりとして機能します。マップはmousemoveに再描画されますが、onmousemove割り当ての一部ではなくであり、その行はonmousemoveプロパティが#map_image_africaに割り当てられた直後に1回だけ実行されます。 anonymous functionにラップすることで、一度に複数行のjavascriptを実行することができます。 、私はあなたを持っているが

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

---

は、onmousemoveとonclickのようなものを直接変更するプロパティが推奨されますのでご注意ください、とEventsはDOM要素と対話するための好ましい方法です。

は、次の試してみてくださいそれはHTMLからjavascriptを分離するためです。

上記onmousemove割り当ては（とすべきである）などのように書き換えることができます：明確な答えのための

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