Javascript 我可以在图像地图区域元素上有一个 onclick 事件吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29921696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
can i have an onclick event on a imagemap area element
提问by danyo
I would like to put an onclick event on an area element. Here is my setup:
我想在区域元素上放置一个 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>
I have tried 2 different ways to have an onclick event. Firstly i tried this:
我尝试了 2 种不同的方式来触发 onclick 事件。首先我试过这个：
$(".blue").click( function(event){
alert('test');
});
I have also tried this:
我也试过这个：
function myFunction() {
alert('test');
}
Neither of the above work. Do area elements support the above, or do they only support having a href?
以上都没有工作。区域元素是否支持上述内容，还是仅支持具有 href ？
Thanks in advance!
提前致谢！
回答by
Pay attention:
请注意：
Attribute href is obligatory, without it the area-tag does nothing!
To add a click event, you'll need to block default href.
属性 href 是强制性的，没有它，area-tag 什么也不做！
要添加点击事件，您需要阻止默认的 href。
Your code should start as follows:
您的代码应如下开始：
$(".blue").on("click", function(e){
e.preventDefault();
/*
your code here
*/
});
回答by treeFan
Its the shape that's the problem. Your code has set shape equal to polygon but only has 4 points in the coordinates attribute. You need to set shape to rectangle instead.
它的形状是问题所在。您的代码已将形状设置为等于多边形，但坐标属性中只有 4 个点。您需要将形状设置为矩形。
Set shape="rect" like this:
像这样设置 shape="rect"：
<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
<map name="Map">
<area class="blue" onclick="myFunction()" shape="rect" coords="2318,480,1510,1284" href="#">
</map>
<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
<map name="Map">
<area class="blue" onclick="myFunction()" shape="rect" coords="2318,480,1510,1284" href="#">
</map>
回答by weird_error
Use a class for all elements you want to listen on, and optionally an attribute for behavior:
为您想要监听的所有元素使用一个类，并可选地为行为使用一个属性：
<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" alt="350 x 150 pic">
<div class='popup hidden'></div>
Then add your event listeners to all elements in the class:
然后将您的事件侦听器添加到类中的所有元素：
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
}
回答by CONvid19
Based on your comments, you just need this:
根据你的评论，你只需要这个：
$("#image").click( function(){
alert("clicked");
//your code here
});
Demo:
演示：
回答by Jules
Try :
尝试 ：
<img src="wheel.png" width="2795" height="2795" alt="Weels" usemap="#map">
<map name="map">
<area shape="poly" coords="2318,480,1510,1284" alt="otherThing" href="anotherFile">
</map>
You souldn't want to add onClickevents on area, documentation :
您不想onClick在区域、文档上添加事件：
The tag defines an area inside an image-map (an image-map is an image with clickable areas).
该标签定义了图像映射内的区域（图像映射是具有可点击区域的图像）。
Edit : your coords are a bit weird since its supposed to the couples of each vertices (so right now, your polygon is a line)
编辑：你的坐标有点奇怪，因为它应该是每个顶点的一对（所以现在，你的多边形是一条线）
回答by TimorEranAV
This is a simple one:
这是一个简单的：
<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="#">回答by MLPJ
I found this question by @TimorEranAV HTML map that displays text instead of linking to a URLand was marked as duplicate, but i think what he was expecting is this,
我通过@TimorEranAV HTML 地图发现了这个问题，该 地图显示文本而不是链接到 URL并被标记为重复，但我认为他期望的是这个，
<html>
<head>
<title> Program - Image Map</title>
</head>
<body>
<img src="new.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" title = "Sun">
<area shape="rect" coords="82,0,100,126" href="mercur.htm" alt="Mercury" title = "Mercury">
</map>
</body>
</html>
Here the title tag gives the opportunity to add a hover text(tip) to the image map.
这里的标题标签提供了向图像映射添加悬停文本（提示）的机会。
