onmousemove不發作的事件

Question

我已經通過本博客和其他人提供的答案進行搜索，沒有任何解決方案。非常感謝幫助。

我有一個onmousemove事件正在執行要觸發的事件列表中的第一個項目，但不會執行第二個項目。 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屬性分配功能時，您希望發生兩種截然不同的功能。不幸的是，因爲這樣你寫了下面的語句：

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

它實際上正是如此解析：

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

learnPanel.redraw; 

你看這個問題？分號用作命令的結尾。該地圖在mousemove上重新繪製，但learnPanel.redraw不屬於onmousemove分配，並且該行僅在onmousemove屬性分配給#map_image_africa之後執行一次。通過將其包裝在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從HTML中分離出來。

以上onmousemove分配可以（也應該）被改寫爲這樣的：

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