div 내부의 요소가 이벤트 처리기에서 간섭하지 않아야합니다.

Question

div이 있고 그 안에 이 있습니다. 단락은 div 위에 시각적으로 표시됩니다. 내 이벤트 처리기가 단락의 영향을받습니다. 내가 사업부 내 마우스를 이동하고 때 단락을 건너 경우

$("#container-map").on("mouseover mouseleave", ".ct-symbol", function() { 
    $(this).toggleClass("active-b"); 
}); 

그래서,이 클래스를 전환합니다

이 내 이벤트 핸들러입니다. 내가 원하는 것은 div에 들어가거나 나가면 수업을 토글하는 것뿐입니다.

Answer 1

$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() { 
    if (this.id == "container-map") 
    { 
     $(this).toggleClass("active-b"); 
    } 
}); 

작업을해야 그 ...

$("#container-map").on("mouseover mouseleave", ".ct-symbol", ".ct-symbol p" function() { 
    $(this).toggleClass("active-b"); 
}); 

을하지만 단락 위에 내 마우스를 이동하면 지금은 두 번 전환 : 나는 또한이를 사용했습니다. this이 div와 동일한 ID를 가질 때만 발생합니다.

Answer 2

당신은

$("#container-map").on("mouseenter mouseleave", ".ct-symbol" function() { 
    $(this).toggleClass("active-b"); 
}); 

Answer 3

당신이 원하는 것은 당신이 떠날 때 활성-B 클래스에만 영향을 받는다는 경우 mouseover이/입력하지 mouseenter을 사용해야합니다.

마우스 센터 아니요 mouseover을 사용해야합니다.

$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() { 
    $(this).toggleClass("active-b"); 
});