處理OnClick事件在JavaScript帆布和獲取它的座標

Question

我有一個畫布繪製這樣的

<div id="canvas" style="position:relative;width:600px;height:300px;" onclick="q()"></div>

我需要處理它，當點擊事件，並得到畫布上的座標，它被點擊

Answer 1

您需要獲取頁面的x和y座標，然後減去canvas偏移量以使它們相對於canvas。

function q(event) { 
    event = event || window.event; 

    var canvas = document.getElementById('canvas'), 
     x = event.pageX - canvas.offsetLeft, 
     y = event.pageY - canvas.offsetTop; 

    alert(x + ' ' + y); 
} 

jsFiddle。

您應該考慮使用onclickHTML屬性悄悄附加事件，即而不是。

Answer 2

使用jQuery，您可以直接閱讀.pageX和.pageY屬性。

http://docs.jquery.com/Tutorials:Mouse_Position#Where_did_they_click_that_div.3F

Answer 3

由於HTML5，剛剛拿到layerX和事件本身的屬性layerY。太好了！