代码之家 › 专栏 › 技术社区 › LetsPlayGlobalGames

onmousemove事件未启动

onmouseover html javascript

LetsPlayGlobalGames · 技术社区 · 11 年前

我已经搜索了这个博客和其他博客中提供的答案,但没有任何解决方案。非常感谢您的帮助。

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

这个问题似乎不是特定于浏览器的;它出现在Chrome和Safari中。还没有试过萤火虫。

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

提前感谢您的帮助!

1 回复 | 直到 11 年前

Julian H. Lam 11 年前

欢迎使用StackOverflow!

你需要的是 匿名函数 。当您为 mousemove 上的属性 #map_large_africa ,您希望出现两个不同的函数。不幸的是,由于您编写以下声明的方式:

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

它实际上是这样解析的:

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

learnPanel.redraw;

你看到问题了吗?分号充当命令的结尾。鼠标移动时会重新绘制地图,但是 learnPanel.redraw 不是的一部分 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();
}

当我有你的时候,请注意,直接修改属性 鼠标移动时 和 onclick 不鼓励,以及 Events 是与DOM元素交互的首选方式,因为它将javascript与HTML分离。

以上内容 鼠标移动时 赋值可以(也应该)这样重写:

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