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 ：显示＆＃34;手＆＃34;游标并对点击作出反应（这是我实际想要的行为）。
Firefox ：不显示＆＃34;手＆＃34;光标，但对点击做出反应。
IE 和边缘：既不显示＆＃34;手＆＃34;游标也不会对点击做出反应。

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

我的代码中是否有某个错误，或者这是IE / Edge中的错误？

Answer 1

您需要href。而且您必须忽略click函数中的事件。另外，如果您为每个区域指定一个ID，或者如果某些区域以相同的方式响应，则使用一个类（即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使图像映射区域可单击？

1 个答案: