onmouseover 和 onmouseleave 在图像映射上随机触发

Posted 2023-02-24

【中文标题】onmouseover 和 onmouseleave 在图像映射上随机触发

【英文标题】：onmouseover and onmouseleave triggering randomnly on image map

【发布时间】：2020-02-20 10:43:21

【问题描述】：

我遇到了关于 onmouseover 和 onmouseleave 事件的问题。这段代码可能只有 5% 的时间有效，我不明白为什么。当我将鼠标悬停在图像地图上时，只是看着控制台。它触发 onmouseover 然后 onmouseleave 然后 onmouseover 再次。如果我注释掉引导模式显示并隐藏，那么图像只会交换并正常触发事件。我不知道这是引导模式的问题还是什么，但我在同一页面上有两个正常触发的号召性用语按钮。任何帮助是极大的赞赏。

这是我的 jquery

  function openAutomation()
    console.log("openAutomation");
    $('#image-map').attr('src', automation);
    $('#automationModal').modal('show');
  ;

  function openIntegration() 
    console.log("openIntegration");
    $('#image-map').attr('src', integration);
    $('#integrationModal').modal('show');
  ;


  function closeAutomation()
    console.log("closeAutomation");
    $('#image-map').attr('src', original);
    $('#automationModal').modal('hide');
  ;

  function closeIntegration() 
    console.log("closeIntegration");
    $('#image-map').attr('src', original);
    $('

这是我的 HTML 代码：

<map name="image-map" class="image-map-class">

<area class="automation-map" onmouseover="openAutomation()" onmouseleave="closeAutomation()" coords="304,559,1011,148,1143,229,1518,447,1516,485,1463,497,1444,510,1436,522,1241,636,1159,716,1076,762,959,801,813,884,494,696,304,589" shape="poly"> 

<area class="integration-map" onmouseover="openIntegration()" onmouseleave="closeIntegration()" coords="1571,477,1456,494,1418,566,1088,756,871,881,868,916,1006,993,1229,1074,1274,1063,1348,1021,1483,944,1629,856,1793,761,1848,732,1881,701,1879,686,1703,551" shape="poly">

</map>

【问题讨论】：

也可以使用jquery函数.mouseover()和.mouseleave()

我试过了，但不幸的是结果相同

【参考方案1】：

我会为此使用 svg 图像而不是 png 并将元素分组到交互区域：

<svg viewBox=""><g class="interactive-map">your svg code (path,circle,rect)</g></svg>

通过这种方式，您将拥有响应性和交互性的区域。

【讨论】：

请尽量不要抽象，更贴近问题的上下文和细节。

我正在使用响应式图像映射 js，因为它响应良好。问题是这在之前没有触发额外事件的情况下工作，所以问题不在于 svg over png。感谢您的回复。我很感激

【参考方案2】：

Ok 设法获得了一个解决方案，因此对于在图像映射内使用 Bootstap 模态的任何人，其内部区域使用 onmouseleave 和 onmouseover 事件。那么你需要使用下面的css：

  .modal-backdrop 
    pointer-events: none !important;
 
  .modal 
    pointer-events: none !important;
  

  .modal-content
    pointer-events: none !important;
  

基本上没有这个，它会在 onmouseover 发生时立即触发 onmouseleave，然后再次重新触发 onmouseleave。我真的希望这对某人有所帮助，但我觉得这对于本网站来说非常具体