jquery - 用Jquery检测矩形坐标中的点击

Question

当用户在矩形坐标内单击时，我希望我的代码检测并触发自定义函数。

如果已经知道 Rectangle 的坐标。

我试过这段代码

W = $(el).width();
   H = $(el).height();
   X = $(el).position().left;
   Y = $(el).position().top;

但无法检测到它。

例子

考虑一下。我想在这些坐标内检测和触发功能。

http://www.mathopenref.com/coordrectangle.html

获取鼠标坐标很容易：-

$('canvas').mousemove(function(e){
    drawPaddle(e.pageX, e.pageY);
});


function drawPaddle(paddleX, paddleY) {
    c.beginPath();
    c.rect(paddleX, paddleY, 150, 10);
    c.closePath();
    c.fill();
}

如何检测用户是否在我的矩形坐标内单击？

Answer 1

您可以直接在单击事件上检查鼠标位置。只需将其与您的矩形坐标进行比较。

$(document).mousedown(function(e) {
   var x = e.pageX;
   var y = e.pageY; 

    if((x >= X && x <= X+W) &&
       (y >= Y && y <= Y+H))
        alert("in");
});

var el = "#div1";
var W = $(el).width();
var H = $(el).height();
var X = $(el).position().left;
var Y = $(el).position().top; 

看看我的jsfiddle。

Answer 2

像这样的东西

var mouseX;
var mouseY;


$(el).mousemove(function(e){
    mouseX = e.pageX;
    mouseY = e.pageY;
});

$(el).click(function(e)
{
    W = $(el).width();
    H = $(el).height();
    X = $(el).position().left;
    Y = $(el).position().top;

    if (mouseX>X   && 
        mouseY>Y   && 
        mouseX<X+W && 
        mouseY<Y+H)
    {
        //do something
    }
});

虽然它可能需要一些调整...