Question

I’m using Seadragon to show a large image, and I’ve added some custom controls such that when I click on those controls, I pan/zoom to a specific point in the image. This works great for FF, Chrome, and Opera.

IE, though, has a problem. Here’s what I think is the relevant code:

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

I added a console.log(this) to see what Firebug would tell me about the object being clicked. In Firefox, I get

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

but in IE8 (using Firebug Lite) I get

Window debug.html

which is the name of the html page I’m using to test all of this.

Question: how can I get the HTML element information when I click on an HTML element that works in IE, as well as the other common browsers?

Answer 1

This is a known issue with event handling in IE. DOM event handlers have ‘this’ set to the window instead of to the object that fired the event. Instead of using ‘this’, do the following in onControlClick():

function onControlClick(event) {
  var target = event.target || event.srcElement;

  // ...

  viewer.viewport.panTo(new Seadragon.Point(navButtons[target.innerHTML].x, navButtons[target.innerHTML].y));