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。它不存在于standard DOM MouseEvent对象上（这就是为什么Firefox没有它），即使在IE中，它通常也不是你想要的。它与最近的祖先相对，其中“定位”的含义可能会有所不同。通常情况下，获得与页面相关的坐标会更好。

不幸的是，提供此功能的pageX属性也不是标准的Event属性，因此尽管IE9，Firefox，WebKit等支持它，但您无法保证它存在。您可以使用clientX，它是标准的，但相对于视口，因此要在视口滚动时更正它，您必须添加scrollLeft的{{1}}（除非你处于IE Quirks模式，在这种情况下它是documentElement而不是......不要处于怪癖模式！）。

（MouseEvent上的另一个标准定位属性是body，但除了定位弹出窗口之外，这个属性基本没用。还有非标准属性screenX和offsetX甚至更多无用的。）

layerX

最好首先测试标准（if (window.event) {不是evt），并且只返回undefined IE＆lt; 9。否则，您可能无法在支持两者的浏览器上获得您所期望的内容，或者在其他地方（例如变量或元素）定义了名为window.event的内容。

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循环。虽然还有更多潜在的浏览器问题。叹。框架可以在这里提供帮助。虽然说实话，他们中的大多数人仍然会在一些丑陋的角落里绊倒。

（如果一些有用的组织将MouseEvent offsetParent / pageX指定为标准，并且添加元素/视图pageY / pageLeft属性以匹配将非常愉快......我可以梦想...）

Javascript firefox无法找到所有其他浏览器所做的值

2 个答案: