Question

我正在使用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元素信息？

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的文档非常稀疏，但事件对象似乎是库存。

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

2 个答案: