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

我建议在主图像上放置4个空div - 每个角落一个然后你只需要为4个div中的每一个添加一个“click”事件
这是一个更简单的解决方案，并且非常容易调试。

Answer 2

解决了，这是一个愚蠢的错字......由于剪切和粘贴，我离开了“.box”而不是“#Main”！

我想检测用户是否点击了图片的左上角，右上角，左下角或右下角。

2 个答案: