Href 和 onclick 事件在 <area> 上不起作用答案

【问题标题】：Href and onclick events not working on <area>Href 和 onclick 事件在 <area> 上不起作用
【发布时间】：2016-01-12 19:11:37
【问题描述】：

我已经用 mapper.js 制作了一张区域地图，在我将事件（href 或 onclick）放在同一区域之前，一切似乎都很好。我正在使用 primefaces xhtml。

我的问题是这样的：

当我调用 mapper.js 时，链接停止工作，但“悬停”工作正常。
如果我没有调用“mapper.js”，则链接可以正常工作，但显然悬停不起作用。

请告诉我，我怎样才能让“悬停”和“onclick/href”都正常工作...

这里有 index.xhtml 文件：

<ui:define name="content">
    <p:panelGrid columns="1"  style="display:block;" id="panel_home">
    <h:form id="department_form" style="display:none">
        <ui:repeat value="#{departamentsController.departments}" var="department" >
            <p:commandButton id="departmentButton" value="#{department.name}" oncomplete="PF('dialog').show();" styleClass="#{'department_'.concat(department.id)}" update="listFilesForm" actionListener="#{fileSearchController.filesByDepartment(department)}"/>
        </ui:repeat>
    </h:form>

    <h:graphicImage id="graphicImage1" ismap="true" styleClass="mapper iborder456c74 icolord76f47" url="/resources/images/mapa1.png" usemap="#map1" />
        <map name="map1" id="map1">
            <area href="JavaScript: document.getElementById('department_form:j_idt13:13:departmentButton').click();"  shape="poly" coords="434,166,438,162,439,158,445,148,450,137,456,134,458,126,461,121,466,120,470,119,476,121,493,89,505,85,515,82,526,80,536,73,547,63,539,47,529,44,524,42,522,40,517,40,514,41,514,45,510,45,509,43,507,46,503,48,502,46,498,49,501,52,499,55,494,58,492,57,492,53,485,52,484,54,483,59,483,64,477,76,467,81,453,85,444,88,436,95,423,103,418,106,410,113,394,115,390,122,389,128,388,136,392,140,398,139,406,139,412,141,410,148,413,150,418,146,421,149,423,153,423,159,420,165,419,169,427,165" />
            <area href="JavaScript: document.getElementById('department_form:j_idt13:14:departmentButton').click();" shape="poly" coords="371,260,377,254,369,244,368,239,363,232,357,227,365,222,373,220,375,221,377,218,366,198,360,188,369,172,376,170,384,167,390,163,395,163,393,158,391,152,392,148,390,143,388,139,394,113,386,114,378,113,372,111,368,107,361,107,358,110,353,115,352,120,352,123,349,132,344,142,342,146,335,145,334,142,327,142,327,139,333,137,333,131,328,126,318,124,316,126,318,131,319,141,320,150,320,158,315,163,310,170,308,176,305,182,305,186,312,188,314,195,311,198,309,202,312,210,313,216,315,220,313,226,320,232,329,243,336,240,339,243,344,243,351,252" />

        </map>
    </p:panelGrid>
</ui:define>

所以，无论我使用“href="JavaScript: ..." 还是“onclick="，都没有任何变化。我已经搜索了很多地方并进行了很多测试，但仍然没有知道如何在区域上“悬停”和“onclick/href”都可以正常工作。

我有 30 个区域，但要知道我只复制了两个。

提前感谢您的帮助！

【问题讨论】：

这个 PrimeFaces 有什么关系？请创建一个minimal reproducible example。您会看到很可能没有留下任何 PF 标签。这都是纯 HTML/javascript（不是 xhtml）问题
感谢您的回复@Kukeltje 我会提醒您所说的关于提出问题的最佳方法...关于我自己的问题，以防万一有人遇到类似问题。一位朋友告诉我，对于的最佳实践，最好使用 onclick 事件而不是 href。当你有很多（例如地图）时，最好按 Class 而不是 Id 调用操作。他还向我展示了以下将触发动作并显示悬停效果的事件：onclick="document.getElementsByClassName('nameofclasshere')[0].click();" ...谢谢您的帮助:)
请将问题改进为（a.o. 删除所有 PF 内容，因为它完全不相关）

标签： javascript html onclick hover

【解决方案1】：

在区域标签中最好有一个 onclick 事件而不是一个 href。当您有很多区域（例如地图）时，最好按 Class 而不是 Id 调用操作。它还向我展示了以下将触发动作并显示悬停效果的事件：

    onclick="document.getElementsByClassName('nameofclasshere')[0].click();"

这对我来说非常有效...感谢 Sergio Morales 的回答 :)

【讨论】：