javascript - Html map 对象 - 单击 map 部分获取 id

Question

当用户单击 map 的一部分时，我尝试获取该部分的 id。

<img src="images/mapa.png"  alt="" width="588" height="711" usemap="#Map" />
<map name="Map" class="map">
  <area shape="circle" id="vrsac" coords="317,191,25" href="#">
  <area shape="circle" id="pancevo" coords="273,225,25" href="#">
  <area shape="rect" id="beograd" coords="195,247,251,276" href="#">
  <area id="lazarevac" shape="rect" coords="204,283,267,318" href="#">
</map>

$(document).ready(function(){
    $( ".map" ).click(function() {
        alert("Click: " + this.id);
    }); 
});

谢谢

已解决

我将类添加到区域标记。

  <area class="qwe" shape="circle" id="vrsac" coords="317,191,25" href="#">      

Answer 1

这里有两个选择。第一个是使用正确的选择器:您想要跟踪 area 标签上的点击，而不是某些 map 类元素上的点击。所以你的代码应该是:

$("area").click(function () {
    alert("Click: " + this.id);
});

或者第二个，在性能方面更高效 - 将点击事件从内部 area 标记委托(delegate)给父 map:

$("map").on('click', 'area', function () {
    alert("Click: " + this.id);
});