Javascript 在Firefox中获取画布上的鼠标位置

我想得到相对于画布的X，Y坐标（鼠标移动事件）

我用这个：

<canvas id='c' onmousemove="xy(event)" WIDTH=500 HEIGHT=300>

这在Chrome中效果很好，但在Firefox中效果不好。如果canvas元素位于0,0位置，那么它也可以在Firefox中工作

看看这个：

---

我该怎么做才能使它也在FF中工作？

您可以尝试计算它：

// ...
var x = e.pageX - canvas.offsetTop;

其中canvas是canvas-dom元素。

---

这应该适用于FF。

您可以尝试计算它：

// ...
var x = e.pageX - canvas.offsetTop;

其中canvas是canvas-dom元素。

---

这应该在FF中起作用。

容器必须具有

position: relative;

风格。不要使用那个容器来设置边框的样式，因为它在坐标中表示+npx（n=boder size）

感谢：

---

容器必须具有

position: relative;

风格。不要使用那个容器来设置边框的样式，因为它在坐标中表示+npx（n=boder size）

感谢：

这对我很有效（纯js）

这对我有用（纯js）

---

@2斯大拉维斯塔由于声誉问题，我无法发表评论，因此我将把这句话放在这里，即使我不应该这样做：

我尝试了公认的答案，但它只解决了位于画布左/上方的其他元素的问题。对我来说，它没有考虑画布的边距。不过我不知道我是否做对了。 我也不喜欢Html方面的解决方案。有人更改了Html，忘记了“位置：相对”；导致了一个几乎无法追踪的错误

我使用了Nech的解决方案，但注意到当我将元素放置在画布左侧或上方时，它无法正常工作。它只考虑画布的边距之类的因素

我使用了以下代码，与Chrome部分相比，Firefox部分的准确率仍然只有95-99%。但它完成了任务：

function getEventX(event){
    if (event.offsetX) {
        return event.offsetX;
    }
    if (event.clientX) {
        var currentElement = event.currentTarget;
        var offsetLeft = currentElement.offsetLeft;

        while(currentElement.parentElement && currentElement.parentElement.offsetLeft){
            currentElement = currentElement.parentElement;
            offsetLeft += currentElement.offsetLeft;
        }     

        return event.clientX - offsetLeft;
    }
    return null;
};

function getEventY(event){
    if (event.offsetY) {
        return event.offsetY;
    }
    if (event.clientY) {
        var currentElement = event.currentTarget;
        var offsetTop = currentElement.offsetTop;

        while(currentElement.parentElement && currentElement.parentElement.offsetTop){
            currentElement = currentElement.parentElement;
            offsetTop += currentElement.offsetTop;
        }     

        return event.clientY - offsetTop;  
    }
    return null;
};

我还移除了交给函数的画布，您可以通过以下方式获得画布：

event.currentTarget;

---

处理多张画布时可能会更好。

@2astalavista由于声誉问题，我无法发表评论，所以我会将此放在这里，即使我不应该这样做：

我尝试了公认的答案，但它只解决了位于画布左/上方的其他元素的问题。对我来说，它没有考虑画布的边距。不过我不知道我是否做对了。 我也不喜欢Html方面的解决方案。有人更改了Html，忘记了“位置：相对”；导致了一个几乎无法追踪的错误

我使用了Nech的解决方案，但注意到当我将元素放置在画布左侧或上方时，它无法正常工作。它只考虑画布的边距之类的因素

我使用了以下代码，与Chrome部分相比，Firefox部分的准确率仍然只有95-99%。但它完成了任务：

function getEventX(event){
    if (event.offsetX) {
        return event.offsetX;
    }
    if (event.clientX) {
        var currentElement = event.currentTarget;
        var offsetLeft = currentElement.offsetLeft;

        while(currentElement.parentElement && currentElement.parentElement.offsetLeft){
            currentElement = currentElement.parentElement;
            offsetLeft += currentElement.offsetLeft;
        }     

        return event.clientX - offsetLeft;
    }
    return null;
};

function getEventY(event){
    if (event.offsetY) {
        return event.offsetY;
    }
    if (event.clientY) {
        var currentElement = event.currentTarget;
        var offsetTop = currentElement.offsetTop;

        while(currentElement.parentElement && currentElement.parentElement.offsetTop){
            currentElement = currentElement.parentElement;
            offsetTop += currentElement.offsetTop;
        }     

        return event.clientY - offsetTop;  
    }
    return null;
};

我还移除了交给函数的画布，您可以通过以下方式获得画布：

event.currentTarget;

---

处理多张画布时可能更好。

HTML5，

onMouseMove

内联和大写属性。这样的混乱我的第一条评论是，您应该避免使用HTML属性来设置事件处理程序。我发现纯javascript的可靠性更高，甚至可能在其中加入一点jQuery或Prototype.js，使其更简单。HTML 5、

onMouseMove

内联和大写属性。这样的混乱我的第一条评论是，您应该避免使用HTML属性来设置事件处理程序。我发现纯javascript的可靠性更高，甚至可以在其中添加一点jQuery或Prototype.js来简化。