Javascript 我想检测用户是否在图像的左上角、右上角、左下角或右下角单击。

我有一个有背景图像的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)");
    }
    });
});

$（文档）。准备好了吗(
$（'#Main'）。单击（函数（e）{
var offset=$（this.offset（）；
如果（（e.clientX-offset.left（$（'.box'）.width（）*0.5）））{
$（'#Main'）.css（“backgroundImage”，“url（../images/img_5.png）”）；
}
});
});

有时它似乎工作得很好，有时我点击一个角落，加载了错误的图像

---

html非常简单，我只有三个div，一个在另一个里面。

我建议在主图像顶部放置四个空div，每个角落一个。
然后，您只需在4个div中的每个div中添加一个“单击”事件。

---

这是一个简单得多的解决方案，并且很容易调试。

解决了，这是一个愚蠢的打字错误…由于剪切和粘贴，我留下了“.box”而不是“#Main”

同意。这就是我要说的+你应该用HTML来添加完整的代码，而不仅仅是jQuery