onmousemove Event Not Firing

Question

Tôi đã tìm kiếm thông qua các câu trả lời được cung cấp trong blog này và các câu trả lời khác mà không có bất kỳ giải pháp nào. Trợ giúp được đánh giá cao.

Tôi có sự kiện onmousemove đang thực thi mục đầu tiên trong danh sách các sự kiện sẽ kích hoạt nhưng sẽ không thực thi mục thứ hai. document.getElementById("map_image_africa").onmousemove = maps.redraw; learnPanel.redraw;

Vấn đề dường như không phải là trình duyệt cụ thể; nó xảy ra trong Chrome và Safari. Chưa thử firefox.

Trong Chrome, tôi có thể kéo bảng điều khiển của trình duyệt và thực thi learnPanel.redraw(); và hoạt động như mong đợi. Ngoài ra, nếu tôi đặt một tuyên bố cảnh báo giữa các câu lệnh maps.redraw và learnPanel.redraw trong sự kiện onmouseover, cảnh báo sẽ thực thi như mong đợi.

đối tượng learnPanel được tạo ra với mã dưới đây

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

Cảm ơn trước sự giúp đỡ!

Answer 1

Chào mừng bạn đến với StackOverflow!

Điều bạn cần ở đây là chức năng ẩn danh . Khi bạn chỉ định các hàm cho thuộc tính mousemove trên #map_large_africa, bạn muốn có hai hàm riêng biệt xảy ra. Thật không may, vì cách bạn đã viết báo cáo kết quả sau đây:

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

Đó là thực sự phân tích cú pháp thusly:

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

learnPanel.redraw; 

Bạn có thấy vấn đề này? Các hành vi bán kết tràng là kết thúc của một lệnh. Bản đồ được vẽ lại trên mousemove, nhưng learnPanel.redraw không phải là một phần của nhiệm vụ onmousemove và dòng đó chỉ được thực thi một lần, ngay sau khi thuộc tính onmousemove được gán cho #map_image_africa. Bằng cách gói nó trong một anonymous function, bạn có thể thực thi nhiều hơn một dòng javascript cùng một lúc.

Hãy thử như sau:

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

---

Trong khi tôi có bạn, xin lưu ý rằng tài sản trực tiếp sửa đổi như onmousemove và onclick được nản chí, và Events là cách ưa thích để tương tác với các yếu tố DOM, vì nó tách javascript khỏi HTML.

Các onmousemove phân trên có thể (và nên) được viết lại như vậy:

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