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