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

어떻게하면 감지 않는 내 사각형의 좌표 내에서 사용자가 클릭은? 그것은 비록 일부 조정해야 할 수도 있습니다이

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 1

뭔가 ...

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.