带有onClick事件处理程序的Seadragon自定义控件: IE中的问题

Question

我使用Seadragon来显示一个大的图像，并且我添加了一些自定义控件，当我单击这些控件时，我会将其移到/缩放到图像中的一个特定点。这对FF，Chrome和Opera都很有用。

不过，呃，有个问题。以下是我认为的相关代码：

       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会告诉我什么是被点击的对象。在火狐中，我得到

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

但是在IE8 (使用Firebug )中，我得到了

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来说，文档非常稀少，但是事件对象似乎是普通的。