onClickイベントハンドラを持つSeadragonカスタムコントロール：IEの問題

Question

Seadragonを使用して大きな画像を表示しています。カスタムコントロールを追加しました。これらのコントロールをクリックすると、画像内の特定の点。これは、FF、クローム、およびオペラに最適です。

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

私はFirebugのがクリックされているオブジェクトを教えてどうなるか見てconsole.log(this)を追加しました：ここには、私は、関連するコードと思われるものです。 Firefoxでは、私は私が取得（Firebugのライトを使用して）

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

が、IE8で取得

Window debug.html私はこのすべてをテストするために使用しているHTMLページの名前です

。

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

Answer 1

これは、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)); 

Answer 2

この（event.target）の代わりにイベントのターゲットを使用してみてください。ドキュメンテーションはSeaDragonにとってかなり稀ですが、イベントオブジェクトはストックのようです。