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 回答