요소 위로 마우스를 가져 가면 여러 이벤트가 발생하지 않도록하려면 어떻게해야합니까?

Question

문제는 다음과 같습니다.

섹터 (Complejo A, Complejo b, Nave 1 등)가있는 주 Svg가 있습니다.

http://www.calimastudio.es/clientes/mercatenerife/planos/test.php

섹터 (i.example 콤 플레 B)에 클릭을 한 후, 다른 SVG가 열려, 당신은 로컬 (numbereds의 B01, B02, 등)에 마우스를 통해 할 수있는 경우.

문제 : Complejo B를 한 번 클릭하십시오. 마우스를 입력 할 때 하나의 경고가 있고, 로컬에서 마우스를 가져갈 때 하나의 경고가 있습니다.

Complejo B를 다시 클릭하면 (또는 닫은 후 다시 열 때) 마우스 입력에 대해 두 개의 경고와 마우스 이탈에 대해 두 개의 경고를 볼 수 있습니다. 콤 플레 B의

셋째 클릭, 당신은 등 trhee 경고를 볼 수 있습니다 ... 등 콤 플레의 B, 네 개의 경고,

에 네 번째 클릭은 항상 하나의 이벤트가 필요합니다.

어떻게 이것을 피할 수 있습니까?

나는 많이 찾고 있었다. 이것은 내가 보여줄 수있는 최소한의 예입니다.

<div class="container"> 
    <div class="container-inner"> 
     <div id="p2"> 
     <div class="close">x</div> 
     <object id="complejo_b" class="sector" data="svg/complejo_b.svg" type="image/svg+xml"></object> 
     </div> 
    </div> 
    </div> 

    <div id="p1" class="container"> 
    <div class="container-inner"> 
     <object id="desktop" class="desktop" data="svg/mercatenerife-desktop.svg" type="image/svg+xml"></object> 

     <!-- <img class="mobile" src="mercatenerife-mobile.svg"> --> 
    </div> 

    <script> 
     // Desktop 
     var object; 

     if (isMobileDevice()){ 
     object=document.getElementById("mobile"); 
     } 
     else { 
     object=document.getElementById("desktop"); 
     } 

     var mySVG = object; 
     var toggleOpacity=true; 
     var transparent='0.6'; 

     var counter=0; 

     var type='mayoristas'; 
     var id; 

     var setLocalTypeFlag=false; 

     mySVG.addEventListener("load",function(event) { 
     var svgDoc; 
     event.preventDefault; 
     event.stopPropagation; 

      svgDoc = mySVG.contentDocument; 

      $('#naves g', svgDoc).click(function(event){ 
      id=$(this).attr('id'); 
      showLocal(id); 

      showSector(id); 
      }); 
     }, false); 
</script> 

<script> 
    function showLocal(id) { 
     var a; 
     a=document.getElementById(id); 
     var svgDoc = (a.contentDocument); //get the inner DOM of alpha.svg 
     var color_original; 
     var fondo_original; 

     $('#locales g rect', svgDoc).on('mouseenter', function(){ 
     alert ('Enter'); 
     }); 

     $('#locales g rect', svgDoc).on('mouseleave', function(){ 
     alert ('Leave'); 
     }) 
    } 
</script> 

Answer 1

범주를 클릭하면 showLocal 함수가 실행됩니다.

$('#locales g rect', svgDoc).on('mouseenter', function(){ 
    // ... 
}); 

$('#locales g rect', svgDoc).on('mouseleave', function(){ 
    // ... 
}) 

이것은 당신이 카테고리를 클릭 할 때마다, 당신은 각 이벤트에 새 수신기를 장착하는 것이 의미 :이 기능은 두 개의 이벤트 리스너를 첨부합니다. 따라서 두 번째 클릭 후 두 명의 청취자가 연결되고 세 번째 클릭 후 세 명의 청취자가 생기게됩니다.

이 문제를 해결하려면 이러한 수신기를 한 번만 연결하면됩니다. 나는 당신의 방법에 대한 몇 가지 변경을했을

$('#locales g rect', svgDoc).one('mouseenter', function(e){ 
    e.stopPropagation(); 
    alert ('Enter'); 
}).one('mouseleave', function(e){ // use chaining for binding mouse leave on same element 
    e.stopPropagation(); 
    alert ('Leave'); 
}); 

Answer 2

사용 event.stopPropagation() 그리고 다음 one() 대신 같은 on()을 사용하여 필요한 경우, 함수에서 또 다시 이벤트를 바인딩하지, 그것을 시도하십시오 .

function showLocal(id) { 
    var a; 
    a=document.getElementById(id); 
    var svgDoc = (a.contentDocument); //get the inner DOM of alpha.svg 
    var color_original; 
    var fondo_original; 
    $('#locales g rect', svgDoc).off('mouseenter'); 
    $('#locales g rect', svgDoc).on('mouseenter', function(){ 
    alert ('Enter'); 
    }); 
    $('#locales g rect', svgDoc).off('mouseleave'); 
    $('#locales g rect', svgDoc).on('mouseleave', function(){ 
    alert ('Leave'); 
    }) 
} 

Answer 3