最小的完整示例 ( 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:显示“手形”光标并对点击使用react(这是我真正想要的行为)。
- Firefox:不显示“手形”光标，但对点击有反应。
- IE 和 Edge:既不显示“手形”光标也不对点击使用react。
我知道我可以将 href 放在 area 标签中，但它是一个高度动态的网站，我想对 area 做各种 jQuery 的事情(悬停突出显示，点击处理程序， ETC。)。我也知道我可以用 area { cursor: pointer; 修复 Firefox 的行为。 }，但这对 IE 和 Edge 没有帮助。
我的代码中是否存在错误，或者这是 IE/Edge 中的错误？
最佳答案
您需要href。而且你必须忽略点击功能中的事件。此外，如果您为每个区域指定一个 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 - 如何使用 jQuery 使图像映射区域可点击？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41962477/