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


    }

}

打印出的值是：

火狐：

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

铬

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 ，它是标准的，但是相对于视口，所以要在视口滚动的情况下更正它，您必须添加documentElement的scrollLeft （除非您处于IE Quirks模式，在这种情况下）它是body而不是......不要处于Quirks模式！）。

（MouseEvent上的另一个标准定位属性是screenX ，但除了定位弹出窗口之外，这几乎没用。还有非标准属性offsetX和layerX ，它们更加无用。）

    if (window.event) {

最好先测试标准（ evt not undefined ），然后只回到window.event ，IE <9。 否则，您可能无法在支持两者的浏览器上获得您期望的内容，或者在其他地方（例如变量或元素）定义了名为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指定为标准，并且添加元素/视图pageLeft / pageTop属性以匹配......那将是非常好的...我可以梦想...）