Пользовательский элемент управления Seadragon с обработчиком событий onClick: проблемы в IE - PullRequest
Новая
       50

Пользовательский элемент управления Seadragon с обработчиком событий onClick: проблемы в IE

0 голосов
/ 11 сентября 2011

Я использую 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-страницу, которую я использую для проверки всего этого.

Вопрос: как получить информацию об элементе HTML, когда я нажимаю на элемент HTML, который работает в IE, а такжедругие распространенные браузеры?

Ответы [ 2 ]

2 голосов
/ 13 сентября 2011

Это известная проблема с обработкой событий в 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));
1 голос
/ 13 сентября 2011

Попробуйте использовать цель из события вместо этого (event.target). Документация для SeaDragon довольно скудная, но объект события, кажется, стандартный.

...