onmouseover и onmouseleave вызывая случайно на карте изображения - PullRequest
Новая
       85

onmouseover и onmouseleave вызывая случайно на карте изображения

0 голосов
/ 20 февраля 2020

У меня проблема с событиями onmouseover и onmouseleave. Этот код работает только в 5% случаев, и я не понимаю, почему. Просто смотрю на консоль, когда нахожу курсор на карту изображения. Он запускает перебрасывание, затем перебрасывание, а затем снова перебрасывание. Если я закомментирую модальное шоу bootstrap и скрою, то изображение просто меняет местами и нормально запускает события. Я не знаю, если это проблема с bootstrap модалами или что, но у меня есть две кнопки призыва к действию на той же странице, которые срабатывают нормально. Любая помощь очень ценится.

Вот мой 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>

Ответы [ 2 ]

0 голосов
/ 21 февраля 2020

Хорошо удалось получить решение, работающее для этого, так что для любого, кто использует Bootstap Modal внутри карты изображения с внутренними областями, используя события onmouseleave и onmouseover. Затем вам нужно использовать следующее css: 

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

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

В основном без этого он запускает onmouseleave, как только происходит onmouseover, а затем снова запускает onmouseleave. Я действительно надеюсь, что это кому-то поможет, но я чувствую, что это было очень конкретно c для этого сайта

0 голосов
/ 20 февраля 2020

Я бы использовал изображение svg вместо png для этого и сгруппировал элементы в интерактивные области: 

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

Таким образом, у вас будут интерактивные и отзывчивые области.

...