svg 요소를 기준으로 마우스 포인터 위치 찾기

Question

다음과 같이 scg 요소가 작성되었습니다.

<svg height="300px" width="600px" xmlns="http://www.w3.org/2000/svg"> 
    <g id="100" onmouseout="outg()" style="stroke-width: 1;fill: rgb(255, 200, 200);"> 
    <rect height="25" rx="10" ry="10" style="fill: rgb(257, 87, 87);" width="160" x="330" y="35" /> 
    <text style="stroke: rgb(0, 0, 0);stroke-width: 1;" x="390" y="53" >ABC</text> 
    </g> 
</svg> 

마우스 포인터가 사각형 내부 (또는 svg 내부)인지 어떻게 결정합니까? 내가 'rect', 'g', 'text'에 대한 onmouseout 이벤트에 간단한 경고를 사용하여 javascript 함수를 호출 해 보았을 때 약간 혼란 스럽습니다. 직사각형 내에서 텍스트 위를 가리키면 기술적으로 직사각형이 종료되고 텍스트가 입력됩니다.

마우스 포인터가 직사각형 밖으로 완전히 벗어나지 않았는지 확인해야합니다. 마우스 포인터가 사각형 밖으로 완전히 벗어 났는지 확인해야합니다. 단 한 번만 수행해야합니다. 사각형 내부의 텍스트 영역으로 넘어가거나 텍스트 영역에서 사각형 안으로 넘어 가지 않아야합니다.

Answer 1

jQuery를 사용하는 경우이 문제가없는 jQuery mouseleave/mouseenter 이벤트를 사용할 수 있습니다.

JQuery와 API 문서 꽤 잘 설명 :

하는 MouseLeave 이벤트는 이벤트 버블 링을 처리하는 방식에로 마우스를 다릅니다. 이 예제에서 mouseout이 사용 된 경우 마우스 포인터가 내부 요소에서 벗어나면 핸들러가 트리거됩니다. 이는 일반적으로 바람직하지 않은 동작입니다. 반면 mouseleave 이벤트는 마우스가 바인딩 된 요소를 떠날 때 핸들러를 트리거합니다. 하위 요소는 바인딩되지 않습니다. 따라서이 예제에서, 마우스가 Outer 요소를 벗어나고 Inner 요소를 벗어나면 처리기가 트리거됩니다. 예제와 함께

는

출처 : 당신이 jQuery를 사용하지 않는 당신은 해킹의 비트를 할 의향이 있다면 http://api.jquery.com/mouseleave/

, 내가 the source for the jQuery mouseleave event 봐, 희망을 가리 킵니다 복용 좋을 것 올바른 방향으로