对特定坐标处图像上的鼠标单击事件做出反应答案

【问题标题】：React to mouse-click event on image at certain coordinates对特定坐标处图像上的鼠标单击事件做出反应
【发布时间】：2018-09-02 00:43:07
【问题描述】：

假设我们有一张图片：

<img src="path/to/image.jpg">

现在我需要一个事件处理程序，当用户在某个坐标（-范围）上单击此图像时激活它。

示例：

每当用户点击红色圆圈中的某处时，都会触发一个事件。我对每一个想法/提示/解决方案都很满意。

祝你有美好的一天！

【问题讨论】：

标签： javascript jquery html image

【解决方案1】：

这是使用您提供的图片的示例代码。检查一下。

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <img src="image.jpg" width="400" height="300" alt="" id="myImgId" />
    <p>X:<span id="x"></span></p>
    <p>Y:<span id="y"></span></p>


    <script type="text/javascript">
        var myImg = document.getElementById("myImgId");
        myImg.onmousedown = GetCoordinates;

        function FindPosition(oElement)
        {
            if(typeof( oElement.offsetParent ) != "undefined")
            {
                for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent)
                {
                    posX += oElement.offsetLeft;
                    posY += oElement.offsetTop;
                }
                return [ posX, posY ];
            }
            else
            {
                return [ oElement.x, oElement.y ];
            }
        }

        function GetCoordinates(e)
        {
            var PosX = 0;
            var PosY = 0;
            var ImgPos;
            ImgPos = FindPosition(myImg);
            if (!e) var e = window.event;
            if (e.pageX || e.pageY)
            {
                PosX = e.pageX;
                PosY = e.pageY;
            }
            else if (e.clientX || e.clientY)
            {
                PosX = e.clientX + document.body.scrollLeft
                    + document.documentElement.scrollLeft;
                PosY = e.clientY + document.body.scrollTop
                    + document.documentElement.scrollTop;
            }
            PosX = PosX - ImgPos[0];
            PosY = PosY - ImgPos[1];

            if(PosX > 125 && PosX < 143 && PosY > 195 && PosY < 221) {
                alert("You clicked on the red circle");
            } else if(PosX > 16 && PosX < 25 && PosY > 141 && PosY < 152) {
                alert("You clicked on the red circle");
            } else if(PosX > 99 && PosX < 117 && PosY > 40 && PosY < 62) {
                alert("You clicked on the red circle");
            } else if(PosX > 284 && PosX < 301 && PosY > 64 && PosY < 92) {
                alert("You clicked on the red circle");
            } else if(PosX > 264 && PosX < 285 && PosY > 138 && PosY < 167) {
                alert("You clicked on the red circle");
            } else if(PosX > 345 && PosX < 359 && PosY > 203 && PosY < 230) {
                alert("You clicked on the red circle");
            }

            document.getElementById("x").innerHTML = PosX;
            document.getElementById("y").innerHTML = PosY;
        }
    </script>
</body>

希望这会有所帮助！

【讨论】：

谢谢！但是，如果删除了 img 宽度/高度，它似乎不起作用..