onmouseover和onmouseleave在图像地图上随机触发

Question

我在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>

Answer 1

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

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

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

Answer 2

OK设法找到一种适用于此的解决方案，因此，对于在图像地图内部使用Bootstap Modal且内部区域使用onmouseleave和onmouseover事件使用该方法的任何人。然后，您需要使用以下CSS：

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

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

基本上没有这个，一旦onmouseover发生，它就会触发onmouseleave，然后再次触发onmouseleave。我真的希望这对某人有帮助，但我觉得这对本网站来说非常具体