Javascript Firefox не может найти значения, которые делают все другие браузеры

Question

function ganttChart(gContainerID) {

    this.gContainer = document.getElementById(gContainerID);    // The container the chart          this.gCurrentDragBar = -1;
    this.gIsDraggingBar = false;
    this.gMouseStartX = 0;
    this.gMouseStartY = 0;
    this.gBarStartX = 0;
    this.gBarStartY = 0;
    this.gBarBeingDragged;
    this.gCurrentMouseX;
    this.gCurrentMouseY;

    // On mouse move
    this.gAttatchMove = function(self) {

        self.gContainer.onmousemove = function(evt) {
            if (self.gIsDraggingBar) {

                self.gUpdateMousePos(evt);
                self.gBarBeingDragged.style.left = (self.gBarStartX - (self.gMouseStartX - self.gCurrentMouseX)) + "px";

                //%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
                // PRINTS MESSAGE HERE
                document.getElementById("db").innerHTML = "Bar start: " + self.gBarStartX + "<br />Mouse start:" + self.gMouseStartX + "<br />Mouse current:" + self.gCurrentMouseX;
                //%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
            }
        }; 
        self.gContainer.onmouseup = function() {
            self.gIsDraggingBar = false;
        };

    }
    var self = this;
    this.gAttatchMove(self);

    // Update mouse coords
    this.gUpdateMousePos = function(evt) {
        if (window.event) {
            this.gCurrentMouseX = event.x;
            this.gCurrentMouseY = event.y;
        }
        else {
            this.gCurrentMouseX = evt.x;
            this.gCurrentMouseY = evt.y;
        }
    }

    // Sets up the bar mouse events
    gSetupMouseEvents = function(gBar, i, self) {

        gBar.onmouseover = function() {
            gBarHighlight(gBar, self.gData[i][1], self.gData[i][2]);
        };
        gBar.onmouseout = function() {
            gBarUnHighlight(gBar, self.gData[i][1], self.gData[i][2]);
        };
        gBar.onmousedown = function(evt) {

            // Initialise
            self.gCurrentDragBar = i;
            self.gBarBeingDragged = document.getElementById("gBar" + i);
            self.gIsDraggingBar = true;

            // Set initial positions
            self.gUpdateMousePos(evt);
            self.gMouseStartX = self.gCurrentMouseX;
            self.gMouseStartY = self.gCurrentMouseY;
            self.gBarStartX = self.gBarBeingDragged.offsetLeft;
            self.gBatStartY = self.gBarBeingDragged.offsetTop;
        };


    }

}

Выводятся следующие значения:

Firefox:

Bar start: 0
Mouse start:undefined
Mouse current:undefined

Chrome

Bar start: 0
Mouse start:163
Mouse current:165

IE

Bar start: 1
Mouse start:3
Mouse current:19

Меня не беспокоит изменение значений между IE / Chrome. Я могу отладить это (только то, как интерпретируется позиция мыши), но Firefox не выбирает никаких значений, меня смущает!

Answer 1

Положение мыши указывается в свойствах «clientX» и «clientY» объекта события, а не «x» и «y».

Answer 2

    this.gCurrentMouseX = evt.x;

Вы не хотите использовать .x. Он не существует для стандартного объекта DOM MouseEvent (именно поэтому в Firefox его нет), и даже в IE это обычно не то, что вам нужно. Это относительно ближайшего расположенного предка, где значение «позиционированного» может варьироваться. Как правило, лучше получить координаты относительно страницы.

К сожалению, свойство pageX, которое дает вам это, также не является стандартным свойством Event, поэтому, хотя оно поддерживается IE9, Firefox, WebKit и т. Д., Вы не можете гарантировать его наличие. Вместо этого вы можете использовать clientX, что является стандартным, но относительно окна просмотра, поэтому, чтобы исправить его в случае прокрутки окна просмотра, вы должны добавить scrollLeft из documentElement (если вы не в IE Режим Quirks, в этом случае вместо этого body ... не будьте в режиме Quirks!).

(Другое стандартное свойство позиционирования в MouseEvent - screenX, но это в значительной степени бесполезно, за исключением размещения всплывающих окон. Существуют также нестандартные свойства offsetX и layerX, которые еще более бесполезны.)

    if (window.event) {

Лучше сначала проверить на стандарт (evt не равен undefined), и отступить только до window.event для IE <9. В противном случае вы можете не получить того, что ожидаете, в браузерах, которые поддерживают оба, или там, где есть что-то еще (например, переменная или элемент), определенное как <code>event.

// Update mouse coords
this.gUpdateMousePos = function(evt) {
    if (evt===undefined) evt= window.event;

    if ('pageX' in evt) {
        this.gCurrentMouseX = evt.pageX;
        this.gCurrentMouseY = evt.pageY;
    } else {
        this.gCurrentMouseX = evt.clientX+document.documentElement.scrollLeft;
        this.gCurrentMouseY = evt.clientY+document.documentElement.scrollTop;
    }
}

Это дает вам относительные координаты страницы. Если вы хотите рассчитать положение относительно определенного элемента, вам нужно вычесть относительные к странице координаты этого элемента, как правило, используя цикл offsetLeft / offsetParent. Хотя там также есть много потенциальных проблем с браузером. Вздох. Рамки могут помочь здесь. Хотя, честно говоря, большинство из них все еще сталкиваются с некоторыми из самых ужасных угловых случаев.

(Было бы замечательно, если бы какая-нибудь полезная организация указала MouseEvent pageX / pageY как стандартную и добавила элемент / view pageLeft / pageTop свойства для соответствия ... Я могу мечтать .. .)