javascript - 捕获 HTML map 区域点击事件的坐标(Chrome)

Question

我有一张世界地图的图像，它允许用户点击特定区域并向其添加新点。

为了实现这一点，我使用带有多边形坐标的图像映射来指定每个可点击区域，然后我有一些代码来处理事件，将点击与地球上的特定区域相关联(重要)并在坐标上绘制一个点用户点击的内容。

以下代码(使用 jQuery)在 IE 和 Firefox 中运行完美，但在 Chrome (v30) 中我无法找到一种方法来捕获鼠标点击相对于父元素的坐标。这很重要，因为 map 在模态可拖动窗口中打开。所有事件坐标都相对于窗口，但与父偏移量无关。

Javascript:

$(function(){
    $("area").click(function(e){
        // IE fix - stop event propagating after initial click
        e.stopPropagation();

        console.log(e);

        // Firefox
        if (firefox) {
            x = e.originalEvent.layerX;
            y = e.originalEvent.layerY
        }
        // IE
        else if (ie) {
            x = e.originalEvent.offsetX;
            y = e.originalEvent.offsetY;
        }
        // Chrome ????
    });
});

HTML:

<div style="padding-left: 50px; padding-top: 40px; position:absolute;">
    <div id="map" style="position: relative;">
        <img src="/View/Images/maps/Globe_2.png" id="worldMap" alt="World Map" usemap="#Globe_2" style="border-style:none" />
    </div>
</div>
<map id="Globe_2" name="Globe_2">
    <area shape="poly" id="na" coords="0,0,344,1,344,46,325,61,314,75,297,80,262,118,253,155,236,179,242,208,208,216,177,223,154,226,148,244,133,259,62,260,0,260" />
    <area shape="poly" id="sa" coords="242,208,179,224,155,227,150,243,145,249,135,259,133,261,0,261,0,502,313,502,312,309,304,279,277,263,246,234" />
    <area shape="poly" id="af" coords="314,503,313,309,306,278,290,269,278,261,247,233,238,180,250,162,327,164,334,164,346,161,355,159,364,159,369,159,372,165,372,167,384,171,396,169,409,174,421,174,425,177,425,179,426,183,426,188,445,223,449,230,452,233,470,228,494,230,518,291,543,306,543,502" />
    <area shape="poly" id="eu" coords="250,161,254,156,263,118,297,81,314,76,316,75,326,61,345,47,345,0,409,0,405,73,402,74,401,76,402,79,404,84,408,90,404,95,407,97,407,100,403,100,403,104,404,108,410,109,414,115,412,118,419,119,419,121,421,122,423,124,432,125,432,130,429,132,422,135,422,138,426,139,428,139,437,144,439,148,443,149,446,155,447,160,428,162,425,176,421,173,410,173,397,168,384,170,373,166,369,158,354,158,334,163,310,163" />
    <area shape="poly" id="as" coords="494,229,470,227,452,232,447,225,427,188,426,181,425,176,429,163,449,161,446,154,443,148,439,147,437,143,427,138,425,138,423,137,423,136,427,134,433,131,433,125,432,124,423,123,421,121,420,120,420,118,413,118,415,115,410,108,405,107,404,105,404,101,408,101,408,97,405,95,409,90,404,84,401,76,403,74,406,73,410,0,776,0,776,292,775,291,718,300,703,294,689,295,671,287,652,298,627,299,544,304,519,290" />
    <area shape="poly" id="au" coords="544,305,654,299,671,289,689,297,703,295,718,301,776,293,776,502,544,502" />
    <area shape="default" id="noclick" nohref="nohref" />
</map>

Answer 1

感谢@adeneo，这个问题现在已经解决了。 Chrome 不提供在图像映射上查找点击事件的相对坐标的方法。但是，使用 jquery.offset() 方法，我可以找到我的图像的坐标(页面上的动态坐标)并根据该坐标计算出点击的相对位置。

clickX = event.pageX - $("#worldMap").offset().left;
clickY = event.pageY - $("#worldMap").offset().top;