在JavaScript中处理画布的OnClick事件并获取其坐标

问题描述

|| 我有一个像这样的画布

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

我需要在单击事件时处理该事件，并在单击它的画布上获取坐标     

解决方法

        您需要获取页面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。 您应该考虑不加干扰地附加事件，即不使用

onclick

HTML属性。     ,        使用jQuery，您可以直接读取.pageX和.pageY属性。 http://docs.jquery.com/教程：Mouse_Position＃Where_did_they_click_that_div.3F     ,        从HTML5开始，只需获取事件本身的layerX和layerY属性。真好！