onmousemove इवेंट फायरिंग

Question

मैंने इस ब्लॉग और अन्य किसी भी संकल्प के बिना दिए गए उत्तरों के माध्यम से खोज की है। सहायता की बहुत सराहना की जाती है।

मेरे पास एक ऑनमौसम घटना है जो घटनाओं की सूची में पहली वस्तु को आग लगाना है लेकिन दूसरे को निष्पादित नहीं करेगा। document.getElementById("map_image_africa").onmousemove = maps.redraw; learnPanel.redraw;

यह समस्या ब्राउज़र-विशिष्ट नहीं प्रतीत होती है; यह क्रोम और सफारी में होता है। अभी तक फ़ायरफ़ॉक्स की कोशिश नहीं की है।

क्रोम में, मैं ब्राउज़र के कंसोल को खींच सकता हूं और learnPanel.redraw(); निष्पादित कर सकता हूं और यह अपेक्षा के अनुसार काम करता है। इसके अलावा, अगर मैं maps.redraw के बीच एक अलर्ट स्टेटमेंट डालता हूं और ऑन-हाउसओवर ईवेंट मेंPanel.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

स्टैक ओवरव्लो में आपका स्वागत है!

आपको यहां क्या चाहिए अज्ञात फ़ंक्शन है। जब आप संपत्ति #map_large_africa पर फ़ंक्शन निर्दिष्ट कर रहे हैं, तो आप दो अलग-अलग फ़ंक्शन बनना चाहते हैं।

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

यह वास्तव में thusly पार्स किया गया है:

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

learnPanel.redraw; 

आप समस्या दिखाई दे रही है दुर्भाग्य से, क्योंकि जिस तरह से आप निम्नलिखित बयान में लिखा है? अर्ध-कॉलन कमांड के अंत के रूप में कार्य करता है। नक्शा mousemove पर फिर से खींचा गया है, लेकिन learnPanel.redrawonmousemove असाइनमेंट का हिस्सा नहीं है, और उस पंक्ति को केवल एक बार निष्पादित किया जाता है, onmousemove संपत्ति #map_image_africa पर असाइन की जाती है। इसे anonymous function में लपेटकर, आप एक समय में जावास्क्रिप्ट की एक से अधिक पंक्ति निष्पादित कर सकते हैं। ,

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

---

मैं तुम हो, कृपया ध्यान दें कि onmousemove और onclick की तरह सीधे संशोधित गुण हतोत्साहित किया जाता है, और Events डोम तत्वों के साथ बातचीत करने के लिए पसंदीदा तरीका हैं:

निम्नलिखित का प्रयास करें क्योंकि यह HTML से जावास्क्रिप्ट को अलग करता है।

ऊपर onmousemove काम (और चाहिए) इस तरह के रूप में लिखा जा सकता है:

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