Поиск положения указателя мыши относительно элемента svg

У меня есть элемент 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», это немного сбивает с толку. Внутри прямоугольника, когда я указываю на текст, технически прямоугольник выходит и вводится текст.

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


javascript svg html onmouseover onmouseout
person Adarsh    schedule 14.04.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

person Bacon    schedule 14.04.2013