HTML5 + JavaScript - 鼠標定位

我對HTML5相當陌生，但我正在學習，現在 - 我正在開發一款非常簡單的遊戲。HTML5 + JavaScript - 鼠標定位

我想要做的是獲得與畫布相關的鼠標X和Y位置，並且有一個圖像可以跟隨鼠標（如十字準線，瞄準）。

但現在，我只想拉動鼠標值。

所以，我有一個稱爲init的函數，它初始化所有內容。當加載圖像精靈這就是所謂的：

function init(){ 
    drawBg(); 
    startDrawing(); 

    document.addEventListener('keydown', checkKeyDown, false); 
    document.addEventListener('keyup', checkKeyUp, false); 

    document.addEventListener('ommousemove', mouseTarget, false); 

}

我不是100％，如果「ommousemove」是正確的，不知道我假設把自己。然後我有mouseTarget功能：

function mouseTarget(e){ 

    var mouseX; 
    var mouseY; 

    if(e.offsetX){ 
     mouseX = e.offsetX; 
     mouseY = e.offsetY; 
    } 
    else if(e.layerX){ 
     mouseX = e.layerX; 
     mouseY = e.layerY; 
    } 

    console.debug("Mouse X: " + mouseX + " Mouse Y: " + mouseY); 

}

我還調用的函數「畫」，這就是所謂每5幀（每更新），所以我假設我需要檢查內的鼠標的位置？

function draw(){ 
    mouseTarget(); 
}

但是後來我得到一個錯誤：Uncaught：TypeError：無法讀取未定義的屬性'offsetX'。我在這裏做錯了什麼？

感謝

來源

2013-01-21 Oliver Jones

只是一個說明。這是一個JavaScript API，它與HTML5規範沒有真正的聯繫（它嚴格地用於HTML）。 –

（如您懷疑），但問題是這一行

document.addEventListener('ommousemove', mouseTarget, false);

應該

document.addEventListener('mousemove', mouseTarget, false);

的e參數在mouseTarget功能將只包含事件信息當通過事件調用時。在你的情況下，它永遠不會通過事件被調用，而只能通過draw函數調用。

這就是爲什麼你所得到的Cannot read property 'offsetX' of undefined.錯誤，因爲在現實中，你是在試圖訪問undefined.offsetX

你應該做的是保持獨立的變量鼠標的位置，然後就引用它們在「畫」功能。

來源

2013-01-21 21:30:46 lostsource

HTML5 + JavaScript - 鼠標定位

回答

相關問題