javascript - 图像 map 上的 onmouse Enter 和 onmouseleave 无法在 IE11 或 Edge 中正确触发，但可以在其他浏览器中使用

Question

这是我认为已解决的上一个问题的延续。它在技术上已针对其他浏览器得到解决，因此我认为作为一个带有其他 issue 链接的新问题可能会更好。

可以查看网页链接here

这是我的图像映射的代码:

    <div class="tech-interactive-banner">

      <img id="image-map" tooltip="Click Me" src="<?php echo $main_graphic['url']; ?>" alt="<?php echo $main_graphic['alt']; ?>" usemap="#image-map">

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

    </div>

这是 Javascript 代码。我在代码中启用了注释:

  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);
    $('#integrationModal').modal('hide');
  };

正如您在上一期中看到的那样，似乎解决了 onmouseover - onmouseleave - onmouseover 触发问题的方法是将 pointer-events: none !important 添加到 .modal -backdrop、.modal、.modal-content 类

如果您使用 Firefox 或 Chrome，您可以看到它正常运行。基本上，如果您将鼠标悬停在图像的一部分上，则会弹出引导模式，如果您将鼠标悬停在图像的同一部分，则引导模式应该隐藏。在 IE/EDGE 中，它总是会触发鼠标悬停，但当您尝试鼠标离开时，99% 的时间都不会触发

Answer 1

找到我的答案 here 。谢谢朱莉。基本上我需要做的就是用 onmouseout 替换 onmouseleave ，它工作得很好