鼠标移动事件未触发

Question

我已经在这个博客和其他地方搜索了提供的答案，但没有找到解决办法。非常感谢您的帮助。

我有一个onmousemove事件，它执行事件列表中的第一项，但不会执行第二项。 document.getElementById("map_image_africa").onmousemove = maps.redraw; learnPanel.redraw;

该问题似乎不是特定于浏览器的；它在Chrome和Safari中发生。尚未尝试firefox。

在Chrome中，我可以打开浏览器控制台并执行learnPanel.redraw();，它按预期工作。 此外，如果我在onmouseover事件的maps.redraw和learnPanel.redraw语句之间放置一个alert语句，则警报将按预期执行。

使用以下代码创建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();

Thanks in advance for the help!

- LetsPlayGlobalGames

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;

你看到问题了吗？分号作为命令的结束符。地图在鼠标移动时重新绘制，但learnPanel.redraw不是onmousemove赋值的一部分，而且该行仅在将onmousemove属性分配给#map_image_africa后执行一次。通过将其包装在匿名函数中，您可以同时执行多行javascript代码。

尝试以下内容：

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

---

当我还有你的时候，请注意直接修改像onmousemove和onclick这样的属性是不被鼓励的，而事件是与DOM元素交互的首选方式，因为它将javascript与HTML分离。

上述的onmousemove赋值可以（并且应该）重写如下：

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

- Julian H. Lam

---

感谢您清晰的回答 - 它解决了问题。我也采纳了您关于事件监听器的建议。谢谢！ - LetsPlayGlobalGames