jquery - 如果光标在坐标之间，jQuery添加点击事件

Question

如果我必须遵循作为地图图像的 HTML。地图分为彩色区域。我的目标是如果光标在图像的某个区域上，则交换图像。

<div id="map" class="mouse-click"><img class="image-swap" src="images/map.png" /></div>

我可以找到 XY 坐标

$('#map').mousemove(function(e){
    var x = e.clientX - this.offsetLeft;
    var y = e.clientY - this.offsetTop;
    $('#map-xy').html("X: " + x + " Y: " + y); 
});

如果光标位于一组坐标之间，如何添加单击事件来交换 img。

任何帮助表示赞赏。

Answer 1

$('#map').on('click', function(e){
    var x = e.clientX - this.offsetLeft,
        y = e.clientY - this.offsetTop;
    if (x > xMin && x < xMax && y > yMin && y < yMax) {
        // click was in target zone, swap img
    }
});

其中xMin, xMin, yMax, 和yMin描述目标区域的边界。