如何感测是否单击了HTML画布的某个区域

Question

I am making a game on a canvas which requires clicking a certain area of a canvas.
I need to find a way to find the coordinates of a mouse and how to sense if a cartain area is clicked.
i want a command that looks like this:

    if(MouseX>20 && MouseX<40 && MouseY >20 && MouseY <40 && MouseClick==true){
alert("you clicked this area");
}

Answer 1

You could create an event listener for your mouse move and track you x and y coordinate. Another listener will could be created for the click event and that is when you can access if the click was in a certain location.

fiddle

var mousePos = {
    x: null,
  y: null
}

document.addEventListener("mousemove", function(e) {
    mousePos.x = e.clientX;
  mousePos.y = e.clientY;
});

document.addEventListener("click", function(e) {
    console.log(mousePos);
});

Both listeners are not strictly necessary, since the clientX and clientY are both on the event of the click, but I find that it is usually good to know the location of the mouse even when the button has not just been clicked.

UPDATE

I am used to dealing with full screen canvases, but it is true that the code I have put here will only give you mouse position on the document and not the canvas. .layerX and .layerY on the event object will give you the position relative to your element.

Answer 2

If you are interested just in canvas area, use this cross-browser code:

var canvas = document.querySelector('canvas');
canvas.addEventListener('click', function (e) {
    var MouseX = e.pageX - this.offsetLeft; 
    var MouseY = e.pageY - this.offsetTop;
});