Нахождение позиции указателя мыши относительно элемента 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). Когда я попытался вызвать функции javascript с помощью простых предупреждений о событиях onmouseout для 'rect','g','text', это немного запутало. Внутри прямоугольника, когда я указываю на текст, технически прямоугольник закрывается и вводится текст.

Мне нужно определить, что указатель мыши полностью находится вне прямоугольника, и это должно произойти только один раз, а не при переходе в текстовую область внутри прямоугольника или из текстовой области в прямоугольник.

Answer 1

Если вы используете jQuery, вы можете использовать события jQuery mouseleave/mouseenter, которые не имеют этой проблемы.

Документация по API jQuery описывает это довольно хорошо:

Событие mouseleave отличается от mouseout тем, как оно обрабатывает всплытие событий. Если в этом примере использовались указатели мыши, то при перемещении указателя мыши из элемента "Внутренний" обработчик срабатывает. Это обычно нежелательное поведение. Событие mouseleave, с другой стороны, запускает свой обработчик только тогда, когда мышь покидает элемент, с которым она связана, а не потомка. Таким образом, в этом примере обработчик срабатывает, когда мышь покидает внешний элемент, но не внутренний элемент.

Источник, с примерами: http://api.jquery.com/mouseleave/

Если вы не используете jQuery и хотите немного взломать, я бы посоветовал взглянуть на источник события jQuery mouseleave, который, мы надеемся, укажет вам правильное направление.