我可以在 imagemap 区域元素上设置 onclick 事件吗？
Posted
技术标签:
【中文标题】我可以在 imagemap 区域元素上设置 onclick 事件吗？【英文标题】：Can I have an onclick event on a imagemap area element? 【发布时间】：2015-07-07 10:30:57 【问题描述】：我想在区域元素上放置一个 onclick 事件。这是我的设置：
<img id="image" src="wheel.png" usemap="#Map" >
<map name="Map">
<area class="blue" onclick="myFunction()" shape="poly" coords="2318,480,1510,1284" href="#">
</map>
我尝试了 2 种不同的方式来设置 onclick 事件。首先我尝试了这个：
$(".blue").click( function(event)
alert('test');
);
我也试过这个：
function myFunction()
alert('test');
以上都不起作用。区域元素是否支持上述内容，还是仅支持具有 href？
【问题讨论】：
你需要得到哪个值？另外，您对"2318,480,1510,1284"" 有额外的报价？
您尝试点击的区域不可点击！ :)
这是默认行为吗？
@PedroLobito 我需要在点击时调用一个 javascript 函数，这个额外的引用是一个错字
就这样？！你不需要用户点击的坐标？
【参考方案1】：
注意：
属性 href 是必须的，没有它，area-tag 什么都做不了！
要添加点击事件，您需要屏蔽默认 href。
你的代码应该如下开始：
$(".blue").on("click", function(e)
e.preventDefault();
/*
your code here
*/
);
Live example here.
【讨论】：
这是一个很好的答案...但是我可以知道我需要更改什么才能在点击时显示图像吗？请参考这个问题***.com/questions/34046331/… 在 html 5 中，href 可以省略：developer.mozilla.org/en-US/docs/Web/HTML/Element/area【参考方案2】：问题在于形状。您的代码已将形状设置为多边形，但坐标属性中只有 4 个点。您需要将形状设置为矩形。
像这样设置 shape="rect"：
<img id="image" src="wheel.png" usemap="#Map" >
<map name="Map">
<area class="blue" onclick="myFunction()" shape="rect" coords="2318,480,1510,1284" href="#">
</map>
【讨论】：
这实际上回答了OP的问题，不需要jquery。【参考方案3】：根据你的 cmets，你只需要这个：
$("#image").click( function()
alert("clicked");
//your code here
);
演示：
http://codepen.io/tuga/pen/waBQBZ
【讨论】：
【参考方案4】：为所有你想监听的元素使用一个类，并且可选地使用一个行为属性：
<map name="primary">
<area shape="circle" coords="75,75,75" class="popable" data-text="left circle text">
<area shape="circle" coords="275,75,75" class="popable" data-text="right circle text">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" >
<div class='popup hidden'></div>
然后将您的事件侦听器添加到类中的所有元素：
const popable = document.querySelectorAll('.popable');
const popup = document.querySelector('.popup');
let lastClicked;
popable.forEach(elem => elem.addEventListener('click', togglePopup));
function togglePopup(e)
popup.innerText = e.target.dataset.text;
// If clicking something else, first restore '.hidden' to popup so that toggle will remove it.
if (lastClicked !== e.target)
popup.classList.add('hidden');
popup.classList.toggle('hidden');
lastClicked = e.target; // remember the target
演示：https://codepen.io/weird_error/pen/xXPNOK
【讨论】：
【参考方案5】：这是一个简单的：
<area class="blue" onclick="alert('test');" shape="poly" coords="2318,480,1510,1284" href="#"><area class="blue" onclick="//JavaScript Code//" shape="poly" coords="2318,480,1510,1284" href="#">【讨论】：
您添加了一个 sn-p 但没有内容，因此没有“可看”的内容呈现，也许您可以修改 html 代码以准确查看运行 sn-p 的操作【参考方案6】：试试：
<img src="wheel.png" usemap="#map">
<map name="map">
<area shape="poly" coords="2318,480,1510,1284" href="anotherFile">
</map>
您不想在区域、文档中添加 onClick 事件：
标签定义了图像映射内部的一个区域（图像映射是具有可点击区域的图像）。
编辑：你的坐标有点奇怪，因为它应该是每个顶点的对（所以现在，你的多边形是一条线）
【讨论】：
但我想调用一些javascript onclick。这不是可以实现的吗？ 当然只要在你想点击的区域加个id，然后使用$("#id").on("click", function(e) //DoSTG );【参考方案7】：
我通过@TimorEranAV 发现了这个问题 HTML map that displays text instead of linking to a URL 并被标记为重复，但我认为他期待的是这个，
<html>
<head>
<title> Program - Image Map</title>
</head>
<body>
<img src="new.png" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" title = "Sun">
<area shape="rect" coords="82,0,100,126" href="mercur.htm" title = "Mercury">
</map>
</body>
</html>
这里的标题标签提供了向图像地图添加悬停文本（提示）的机会。
【讨论】：
以上是关于我可以在 imagemap 区域元素上设置 onclick 事件吗？的主要内容，如果未能解决你的问题，请参考以下文章
使用 maphilight，imagemap 区域应该覆盖绝对定位的图像