사용자가 이미지의 왼쪽 상단, 오른쪽 상단, 왼쪽 하단 또는 오른쪽 하단 부분을 클릭하는지 감지하고 싶습니다.

Question

배경 이미지가있는 div가 있습니다. 사용자가 이미지의 왼쪽 상단, 오른쪽 상단, 왼쪽 하단 또는 오른쪽 하단 부분을 클릭하는지 감지하고 싶습니다. 그래서, 나는 네 개의 사분면으로 나누어 상상, 나는이 코드를 썼다 : 가끔 코너를 클릭하고 잘못된 이미지가로드,

$(document).ready(
    $('#Main').click(function(e) { 
    var offset = $(this).offset(); 

     if((e.clientX-offset.left<($('#Main').width()*0.5)) 
      && (e.clientY - offset.top<($('.box').width()*0.5))){ 

      $('#Main').css("backgroundImage", "url(../images/img_2.png)"); 
    } 
     if((e.clientX-offset.left>($('#Main').width()*0.5)) 
      && (e.clientY - offset.top<($('.box').width()*0.5))){ 

      $('#Main').css("backgroundImage", "url(../images/img_3.png)"); 
    } 
     if((e.clientX-offset.left<($('#Main').width()*0.5)) 
      && (e.clientY - offset.top>($('.box').width()*0.5))){ 

      $('#Main').css("backgroundImage", "url(../images/img_4.png)"); 
    } 
    if((e.clientX-offset.left>($('#Main').width()*0.5)) 
      && (e.clientY - offset.top>($('.box').width()*0.5))){ 

      $('#Main').css("backgroundImage", "url(../images/img_5.png)"); 
    } 
    }); 
}); 

은 때때로 잘 작동하는 것 같다합니다.

html은 매우 간단합니다. 3 개의 div가 하나씩 있습니다.

Answer 1

해결, 그것은 어리석은 오타였습니다 ... 나는 "#Main"대신 ".box"를 잘라 붙이기 때문에 남겼습니다!

Answer 2

메인 이미지 위에 4 개의 빈 div (각 구석에 하나씩)를 배치하는 것이 좋습니다.
그러면 네 개의 div에 "click"이벤트를 추가하면됩니다.

이것은 훨씬 간단한 해결책이며 매우 쉽게 디버깅 할 수 있습니다.