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

Seadragon custom control, with an onClick event handler: problems in IE

本文关键字：IE 问题 程序 事件处理 自定义控件 带有 onClick sedragon      更新时间：2023-09-26

我使用seaddragon来显示一个大图像，并且我添加了一些自定义控件，这样当我单击这些控件时，我可以平移/缩放到图像中的特定点。这适用于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元素信息?

这是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));

尝试使用事件中的目标而不是这个(event.target)。seaddragon的文档非常稀疏，但是事件对象似乎是现成的。

相关文章：