0

Seadragonを使用して大きな画像を表示しています。カスタムコントロールをいくつか追加して、それらのコントロールをクリックすると、画像内の特定のポイントにパン/ズームします。これは、FF、Chrome、およびOperaに最適です。

ただし、IEには問題があります。関連するコードは次のとおりです。

       function makeControl(labelName) {
            var control = document.createElement("a");
            var controlText = document.createTextNode(labelName);

            control.href = "#"; // so browser shows it as link
            control.className = "viewernav";
            control.id = labelName;

            control.appendChild(controlText);

            Seadragon.Utils.addEvent(control, "click", onControlClick);

            return control;
        }

        function onControlClick(event) {
            // don't process link
            Seadragon.Utils.cancelEvent(event); 

            if (!viewer.isOpen()) {
                return;
            }

            console.log(this);

// problem occurs here: in FF, Chrome, Opera, this.innerHTML has the link text, which I use to retrieve from an array
// the location and zoom for each "button"

// in IE8, however, this.innerHTML does not seem to be populated.

            viewer.viewport.panTo(new Seadragon.Point(navButtons[this.innerHTML].x, navButtons[this.innerHTML].y));
            viewer.viewport.zoomTo(navButtons[this.innerHTML].z);
            viewer.viewport.ensureVisible();
        }

console.log(this)クリックされているオブジェクトについてFirebugが何を教えてくれるかを確認するためにを追加しました。Firefoxでは、

<a id="MyButtonName" class="viewernav" href="#" style="position: relative;">

しかし、IE8（Firebug Liteを使用）では、

Window debug.html

これは、これらすべてをテストするために使用しているhtmlページの名前です。

質問： IEやその他の一般的なブラウザで機能するHTML要素をクリックしたときにHTML要素情報を取得するにはどうすればよいですか？

4

2 に答える 2

2

これは、IEでのイベント処理に関する既知の問題です。DOMイベントハンドラーでは、イベントを発生させたオブジェクトではなく、ウィンドウに「this」が設定されています。'this'を使用する代わりに、onControlClick（）で次のようにします。

function onControlClick(event) {
  var target = event.target || event.srcElement;

  // ...

  viewer.viewport.panTo(new Seadragon.Point(navButtons[target.innerHTML].x, navButtons[target.innerHTML].y));
于 2011-09-13T19:38:23.803 に答える
1

これ（event.target）の代わりに、イベントのターゲットを使用してみてください。SeaDragonのドキュメントはかなりまばらですが、イベントオブジェクトは在庫があるようです。

于 2011-09-13T18:56:11.430 に答える