在Firefox中獲取鼠標在畫布上的位置

Question

我想獲得相對於畫布的X，Y坐標（在鼠標移動事件上）。

我正在使用這個：

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

js：

function xy(e)
{
    x = e.offsetX||e.layerX;
    y = e.offsetY||e.layerY;
}

在Chrome瀏覽器中效果很好，但在Firefox中效果不佳。 如果canvas元素位於0,0位置，則它也可以在Firefox中使用。

看看這個： http : //jsbin.com/ozowaz/10

我該怎么做才能使其在FF中正常工作？

Answer 1

容器必須有

position: relative;

樣式。 不要使用該容器來設置邊框樣式，因為在坐標中它意味着+ n px（n =邊框大小）！

感謝： http : //dev.opera.com/articles/view/html5-canvas-painting/

Answer 2

您可以嘗試計算它：

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

其中canvas是canvas dom元素。 那應該在FF中起作用。

Answer 3

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

處理多個畫布時可能更好。

Answer 4

這對我有用（純js）

function getX(event, canvas){
     if(event.offsetX){
       return event.offsetX;
     }
     if(event.clientX){
     return event.clientX - canvas.offsetLeft;
     }
    return null;
 }

function getY(event, canvas){
    if(event.offsetY){//chrome and IE
        return event.offsetY;
    }
    if(event.clientY){// FF
        return event.clientY- canvas.offsetTop;
    }
    return null;    
}