6

このブログや他のブログで提供されている回答を解決せずに検索しました。ヘルプは大歓迎です。

起動するイベントのリストの最初の項目を実行しているが、2番目の項目を実行しないonmousemoveイベントがあります。 document.getElementById("map_image_africa").onmousemove = maps.redraw; learnPanel.redraw;

この問題はブラウザ固有ではないようです。ChromeとSafariで発生します。Firefoxはまだ試していません。

Chromeでは、ブラウザのコンソールをプルアップして実行できlearnPanel.redraw();、期待どおりに機能します。また、onmouseoverイベントのmaps.redrawステートメントとlearnPanel.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();

助けてくれてありがとう！

4

1 に答える 1

6

StackOverflowへようこそ！

ここで必要なのは無名関数です。mousemoveのプロパティに関数を割り当てる場合、#map_large_africa2つの異なる関数を発生させる必要があります。残念ながら、あなたが次のステートメントを書いた方法のために：

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

実際には次のように解析されます。

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

learnPanel.redraw;

問題がわかりますか？セミコロンはコマンドの終わりとして機能します。マップはmousemoveで再描画されますがlearnPanel.redraw、割り当ての一部ではありません。その行は、プロパティがに割り当てられたonmousemove直後に1回だけ実行されます。これを無名関数でラップすることにより、一度に複数行のjavascriptを実行できます。onmousemove#map_image_africa

次のことを試してください。

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

onmousemove私はあなたを持っていますが、やのようなプロパティを直接変更することonclickはお勧めできません。イベントは、JavaScriptをHTMLから分離するため、DOM要素と対話するための推奨される方法です。

上記のonmousemove割り当ては、次のように書き直すことができます（そして書き直す必要があります）。

document.getElementById("map_image_africa").addEventListener('mousemove', function() {
    maps.redraw();
    learnPanel.redraw();
}, false);
于 2013-03-21T02:01:14.367 に答える