javascript - 我可以在图像映射区域元素上添加 onclick 事件吗？

Question

我想在区域元素上放置一个 onclick 事件。这是我的设置:

<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
    <map name="Map">
    <area class="blue" onclick="myFunction()" shape="poly" coords="2318,480,1510,1284" href="#">
</map>

我尝试了两种不同的方法来产生 onclick 事件。首先我尝试了这个:

$(".blue").click( function(event){
    alert('test');
});

我也尝试过这个:

function myFunction() {
    alert('test');
}

以上都不起作用。区域元素是否支持上述内容，还是仅支持 href？

Answer 1

注意:

1. 属性 href 是必需的，没有它，区域标签将不起作用!

2. 要添加点击事件，您需要阻止默认 href。

<小时/>

您的代码应如下所示:

$(".blue").on("click", function(e){
    e.preventDefault();
    /*
       your code here
    */
});

Live example here.