我想檢測用戶是否點擊圖像的左上角，右上角，左下角或右下角部分。

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非常簡單，我只有三個div，一個在另一個裏面。

Answer 1

解決，這是一個愚蠢的錯字...我留下「.box」，而不是「#Main」，因爲剪切和粘貼！

Answer 2

我建議在你的主圖像上放置4個空白div - 每個角落一個。
然後，您需要爲每個4格添加一個「點擊」事件。

這是一個簡單得多的解決方案，而且很容易調試。