用于 IMG 标签的 USEMAP 和 ONCLICK 在 Firefox 中不起作用答案

【问题标题】：USEMAP and ONCLICK both used on IMG Tag not working in Firefox用于 IMG 标签的 USEMAP 和 ONCLICK 在 Firefox 中不起作用
【发布时间】：2014-02-12 04:05:13
【问题描述】：

我有一个带有 USEMAP 和 ONCLICK 的 IMG 标记，当用户单击地图时，我需要设置一个 javascript 变量，然后在调用函数的地图中使用该变量。如果我在 IMG 中注释掉 ONCLICK，则 Map 会毫无问题地调用该函数。如果我注释掉 ONCLICK 触发的 USEMAP，它会设置值，它们就不会一起玩得很好。无论如何我可以使用ONCLICK在Firefox中一起设置变量和USEMAP，这在IE中工作正常。（示例代码如下）

    <map NAME="map3" > 
       <area HREF="javascript:alert('Need to call a function here and pass value for myfield.  value of myfield = ' + myfield)"  COORDS="0,0,10,12"> 
      <area  HREF="javascript:readAnnotation('brsfld', myfield)" COORDS="11,0,20,12">   
     </map> 

    <body>


     <CFSET fld = "CBT001"> 
<IMG SRC="ComQ4.gif" height="12" width="30" BORDER="0"  TABINDEX="-1" ALT=""  USEMAP="#map3"  onclick="alert('here we are');myfield='#fld#';">

     This is my test.

     </body> </html>

【问题讨论】：

<map> 不在<body> 范围内？对吗？

标签： javascript firefox onclick

【解决方案1】：

确保您的地图名称同时出现在 MAP 和 IMG 标记中，如下所示：

<map name="map3">...

<img src="yoururlhere" usemap="#map3"> // not #Map3

更新：

尝试添加事件处理程序

如您所料，添加事件处理程序非常简单。我将使用 jQuery 进行演示。

$(function() {
    $('map[name=my-map] #fave-area').click(function (e) {
        e.preventDefault();
        alert('Clicked!');
    });
});

图片地图：

<map name="my-map">
    <area id="fav-area" shape=poly, coords="0,0, 46,0, 46,46" href="#fav"> 
</map>

有用的链接..http://www.damiangalarza.com/posts/javascript/bringing-back-the-image-map/

【讨论】：

不幸的是，这仍然不是我的问题，我在我的示例代码中修复了这个问题，地图中的警报会出现，但我的 onclick 事件不会显示警报。我需要先触发 onClick，然后再触发 usemap 任何建议。谢谢。
@user3241545 你可以尝试添加一个事件处理程序吗。查看更新的答案。让我知道。