javascript - 如何知道用户点击了图像的左侧还是右侧？

Question

我有一张图片:

<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" class=imgclick>

我有一个图库，我想知道用户是否单击图像左侧来显示之前的图像，或者他是否单击右侧来显示下一张图像。

我尝试过:

$('.imgclick').click(function (e){

    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;

    var total = e.pageX;

    if((total / 2) <= xPos){
        alert("left");
    }
    else{
        alert("right");
    }

});

但它只返回“左”，有什么想法如何解决这个问题吗？

Answer 1

计算x位置，然后检查它是否小于图像宽度的一半。

$(".imgclick").on("click", function(event) {
    var x = event.pageX - this.offsetLeft;
    alert(x < this.width / 2 ? 'Left' : 'Right');
});