겹치는 요소가있는 그룹에 대한 SVG OnMouseOver는 두 번 발생합니다

Question

함수를 첨부 할 때 onmouseover SVG 그룹의 이벤트 <g>...</g>, 이벤트는 포인터가 그룹의 요소에 들어갈 때마다 한 번 발생합니다.

이것은 그룹의 두 요소가 서로 내부에 나타나더라도 발생합니다.

예를 들어:

+-----+
|A ___|
|  |B |
|__|__|

포인터가 들어가면 A 사각형, 그리고 거기에서 B 떠나지 않고 직사각형 A,, onmouseover 이벤트는 그룹을 위해 트리거됩니다 G 둘 다 포함합니다 A 그리고 B.

이벤트는 한 번만 발생하므로 이벤트가 버블 링과 관련이 있다고 생각하지 않습니다.

나는 그룹이 견고한 블록으로 취급 될 것으로 예상했기 때문에 자체 행사를 설정할 때 후손에 대해 걱정할 필요가 없습니다.

어떤 일이 있습니까? 내가 정확하게하고 있습니까? 더 좋은 방법이 있습니까?

Answer 1

친숙하게 들립니다. 버블 링이 그런 경우에 당신을 물게 될 것 같습니다.

특히 2008 년 SVG 오픈 프레젠테이션 중 하나의 예제, 특히 슬라이드 17 관심이 있어야합니다. '마우스 센터'/'Mouseleave'이벤트와 같은 것을 갖는 것은 이것을 해결할 것이지만, 아직 W3C 권장 사항은 아닙니다.

편집하다: 확실하게 mouseenter 그리고 mouseleave 안에있다 DOM 레벨 3 이벤트 작업 초안.

Answer 2

마우스가 어떤 요소에 있는지 확인할 수 있습니다. 특정 그룹의 일부인 경우 마우스 이벤트를 무시하십시오. 그렇게 :

function isRelated(e) { 
    if ($(e.relatedTarget).closest('#rect1,#rect2).length == 0) { //http://api.jquery.com/closest/
        return false;
    }
    return true;
}

여기에 바이올린이 있습니다. http://jsfiddle.net/pftfm/57/