爲什麼mouseleave一直在觸發？

Question

我想創建一個地圖，當我將鼠標懸停在按鈕上時，此地圖的某個位置應該突出顯示。當鼠標進入疊加圖像時，它應該是顯示的，但是當鼠標移動時，在懸停按鈕的內部，疊加圖像會閃爍，並且會重複觸發mouseEnter和mouseLeave事件。我也嘗試使用mouseOver，懸停和鼠標移出相同的結果。難道我做錯了什麼？

HTML：

<div id="map"> 
       <img src="images/map/map.png" />      
       <img src="images/map/mapHover.png" id="hoverhighlands" class="hoverButton"/> 
       <img src="images/map/mapHover.png" id="hovernorth" class="hoverButton"/> 
       <img src="images/map/mapHover.png" id="hovercentral" class="hoverButton"/> 
       <img src="images/map/mapHover.png" id="hoverlothian"class="hoverButton" />     <img src="images/map/mapHover.png" id="hoverwest" class="hoverButton" /> 
       <img src="images/map/central.png" class="mapOverlay" id="central" /> 
       <img src="images/map/highlands.png" class="mapOverlay" id="highlands" /> 
       <img src="images/map/lothian.png" class="mapOverlay" id="lothian" /> 
       <img src="images/map/northeast.png" class="mapOverlay" id="north"/> 
       <img src="images/map/west.png" class="mapOverlay" id="west"/> 
      </div> 

JS：

function setMapOverlays() { 
    $(".mapOverlay").hide(); 
    $(".hoverButton").mouseenter(
     function() { 
      var id = $(this).attr('id');    
      id = id.substr(5); 

      showOverlay(id); 
     }).mouseleave(function() { 
      console.log('mouseleave'); 
      var id = $(this).attr('id'); 
      id = id.substr(5); 
      hideOverlay(id); 
     }) 

} 

function showOverlay(id) { 
    $('#' + id).show(); 
} 

function hideOverlay(id) { 
    $('#' + id).hide(); 
} 

編輯

好吧，我爲什麼它不工作。當.show（）函數觸發我的覆蓋圖像放置在hoverButton上時，觸發onmouseleave。

我設法驗證在mapOverlay上的hoverButton和z-index：1上放置z-index：2。這樣，當我移動鼠標時，事件不會被觸發。

所以我有一個臨時修復。將onmouseleave事件移動到我的mapOverlays而不是我的hoverButtons中，這個技巧。 函數setMapOverlays（）{ $（「。mapOverlay」）。hide（）; （）.http：$（「。hoverButton」）。mouseenter（ function（）{ console.log（'enter'）; var id = $（this）.attr（'id'）; id = id.substr（5 ）;

  showOverlay(id); 
     }); 

    $('.mapOverlay').mouseleave(function() { 
     console.log('mouseleave');    
     hideOverlay($(this)); 
    }) 
} 

這工作，但它不期望的行爲我想覆蓋到隱藏在我的鼠標移出hoverButton關於如何做到這一點的任何建議

兩個圖像，以幫助解釋。？正是我在做什麼：

Answer 1

不要對hoverButton類使用mouseleave事件。嘗試改爲在覆蓋顯示時處理mousemove事件，並檢查是否仍然覆蓋啓動覆蓋顯示方法的元素。

function setMapOverlays() { 
    $(".mapOverlay").hide(); 
    $(".hoverButton").mouseenter(function() { 
     var id = $(this).attr('id'); 
     id = id.substr(5); 

     showOverlay(id, this); 
    }); 
}; 

function showOverlay(id, initiator) { 
    initiator = $(initiator); 
    initiatorBoundary = { 
     x1: initiator.offset().left, 
     x2: initiator.offset().left + initiator.outerWidth(), 
     y1: initiator.offset().top, 
     y2: initiator.offset().top + initiator.outerHeight() 
    }; 

    $('#' + id).mousemove(function(event) { 
     if (event.pageX < initiatorBoundary.x1 || event.pageX > initiatorBoundary.x2 || event.pageY < initiatorBoundary.y1 || event.pageY > initiatorBoundary.y2) { 
      $(this).hide(); 
     } 
    }).show(); 
}​ 

jsFiddle here

順便說一句，也許這會更容易些，而不重疊元件實現。你有沒有考慮在mouseenter和mouseleave上改變整個地圖圖像？

Answer 2

我解決您的JS代碼，並添加一個數據id屬性的img標籤

新的HTML是：

<div id="map"> 
    <img src="images/map/map.png" />      
    <img src="images/map/mapHover.png" id="hoverhighlands" class="hoverButton" data-id="highlands" /> 
    <img src="images/map/mapHover.png" id="hovernorth" class="hoverButton"  data-id="north" /> 
    <img src="images/map/mapHover.png" id="hovercentral" class="hoverButton" data-id="central" /> 
    <img src="images/map/mapHover.png" id="hoverlothian"class="hoverButton"  data-id="lothian" /> 
    <img src="images/map/mapHover.png" id="hoverwest" class="hoverButton"  data-id="west" /> 
    <img src="images/map/central.png" class="mapOverlay" id="central"   data-id="central" /> 
    <img src="images/map/highlands.png" class="mapOverlay" id="highlands"  data-id="highlands" /> 
    <img src="images/map/lothian.png" class="mapOverlay" id="lothian"   data-id="lothian" /> 
    <img src="images/map/northeast.png" class="mapOverlay" id="north"   data-id="north" /> 
    <img src="images/map/west.png" class="mapOverlay" id="west"     data-id="west" /> 
</div> 

新jscode是：

function setMapOverlays() { 
    $(".mapOverlay").hide(); 

    function showOverlay(id) { 
     $('#' + id).show(); 
    } 

    function hideOverlay(id) { 
     $('#' + id).hide(); 
    } 

    function hover() { 
     console.log('hover', this, arguments); 
     var id = $(this).data('id'); 
     showOverlay(id); 
    } 

    function leave(evt) { 
     console.log('leave', this, arguments); 
     var id = $(this).data('id'); 
     var hovered = evt.relatedTarget; 
     if ($(hovered).data('id') == id) { 
      $(hovered).mouseleave(leave); 
      return; 
     } 
     hideOverlay(id); 
    } 

    $(".hoverButton") 
     .mouseenter(hover) 
     .mouseleave(leave); 
} 

你可以試試這個jsFiddle