如何使用 jQuery 使图像映射区域可点击？

Question

最小的完整示例 (jsfiddle)：

<!DOCTYPE html>

<html>
    <head>
        <title>Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body>
        <map name="myMap" id="myMap">
            <area shape="rect" coords="10,10,100,100">
        </map>
        <img src="http://placehold.it/350x150" alt="" usemap="#myMap">

        <script type="text/javascript">
            $(function () {
                $("map#myMap area").click(function () {
                    alert("click!");
                });
            });
        </script>
    </body>
</html>

将鼠标悬停在图片的左上角时，不同浏览器会做什么：

Chome：显示 "hand" 光标并对点击做出反应（这是我真正想要的行为）。
Firefox: 不显示 "hand" 光标，但对点击有反应。
IE 和 Edge：既不显示 "hand" 光标也不响应点击。

我知道我可以将 href 放在区域标签中，但这是一个高度动态的网站，我想对区域进行各种 jQuery 操作（悬停突出显示，单击处理程序等）。我也知道我可以使用 area { cursor: pointer; } 修复 Firefox 的行为，但这对 IE 和 Edge 没有帮助。

我的代码中是否存在错误，或者这是 IE/Edge 中的错误？

Answer 1

您需要 href。而且你必须忽略点击功能中的事件。此外，如果你给每个区域一个 id，或者，如果某些区域以相同的方式响应，则使用 class（即 class="areaRed"）

最易读

例如

<map name="myMap" id="myMap">
 <area id="area1" shape="rect" coords="10,10,100,100" href="#">
</map>

并在您的点击功能中

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

如何使用 jQuery 使图像映射区域可点击？

How do I make an imagemap area clickable with jQuery?

html

css

jquery

imagemap