點擊事件的位置（Y）太高

我有一個畫布元素，當我點擊它時，我用e.clientX（Y）或e.screenX（Y）獲得點擊位置。奇怪的事情正在發生。 Y值總是太高。請看這張圖片：http://img840.imageshack.us/img840/268/eventq.jpg。任何理想爲什麼這麼高？點擊事件的位置（Y）太高

來源

2010-12-02 thomas

是canvas元素在頁面上的第一/頂部元素？屏幕截圖不會讓我們看到頁面的頂部。 ClientY不是相對於當前元素，而是頁面（視口）本身。 – Fosco 2010-12-02 14:24:40

不，有一些文字...有沒有辦法讓它相對於畫布元素？ – thomas 2010-12-02 14:29:24

我很確定你可以告訴發生了什麼事。您沒有相對於您的畫布的座標，但相對於您的視口。它也取決於你的瀏覽器是否包含填充。

將它們轉換爲正常座標。在你的情況下，這涉及減去畫布的偏移量。

來源

2010-12-02 14:23:01 buddhabrot

你只需要採取ClientX和Y並從他們減去畫布的位置。

這個例子是不必要的冗長，只是爲了顯示步驟：

var canvas = document.getElementById('game'); 
var canvasX, canvasY; 

canvas.addEventListener('click', function(event) { 
    canvasX = canvas.offsetLeft; 
    canvasY = canvas.offsetTop; 
    var eventX = event.clientX; 
    var eventY = event.clientY; 
    var relX = eventX - canvasX; 
    var relY = eventY - canvasY; 
    alert('X = ' + relX + ', Y = ' + relY); 
});

工作樣本：http://jsfiddle.net/JfhJF/

來源

2010-12-02 14:40:55 Fosco

點擊事件的位置（Y）太高

回答

相關問題