javascript - onmousemove-händelsen utlöses inte

Jag har sökt igenom svaren som ges i den här bloggen och andra utan någon lösning. Hjälp uppskattas mycket.

Jag har ett onmousemove-evenemang som utför det första objektet i listan av evenemang som ska köras men kommer inte att utföra det andra. document.getElementById("map_image_africa").onmousemove=maps.redraw; learnPanel.redraw;

Problemet verkar inte vara webbläsarspecifikt; det uppstår i Chrome och Safari. Har inte provat Firefox än.

I Chrome kan jag öppna webbläsarens konsol och köra learnPanel.redraw(); och det fungerar som förväntat. Dessutom, om jag lägger in ett alert-kommando mellan statements maps.redraw och learnPanel.redraw i onmouseover-händelsen, kommer alerten att köras som förväntat.

learnPanel-objektet skapas med koden nedan

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

Tack på förhand för hjälpen!

Svar #1

Välkommen till StackOverflow!

Vad du behöver här är en anonym funktion. När du tilldelar funktioner för mousemove-egenskapen på #map_large_africa vill du att två olika funktioner ska inträffa. Tyvärr, på grund av hur du har skrivit följande uttalande:

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

Det tolkas faktiskt på följande sätt:

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

learnPanel.redraw;

Ser du problemet? Semikolonet fungerar som slutet på ett kommando. Kartan ritas om vid musrörelse, men learnPanel.redraw är inte en del av onmousemove-tilldelningen, och den raden körs bara en gång, direkt efter att onmousemove-egenskapen tilldelats #map_image_africa. Genom att kapsla in det i en anonym funktion kan du köra fler än en rad JavaScript åt gången.

Prova följande:

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

Medan jag har dig, vänligen notera att direkt ändring av egenskaper som onmousemove och onclick inte rekommenderas, och Events är det föredragna sättet att interagera med DOM-element, eftersom det separerar JavaScript från HTML.

Ovanstående onmousemove-tilldelning kan (och bör) skrivas om så här:

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