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

像这样的东西

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
    }
});

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

Answer 2

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

$(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。

使用Jquery检测单击矩形坐标

2 个答案: