Mouseover on a SVG:G element

[Sebbi007]

Hi all,

i've a problem with the mosueover.

the structure looks like :

<svg:g id="ico">ow can i modify
<svg:circle></svg:circle>
<svg:path></svg:path>
<svg:text></svg:text>
</svg:g>

now if i use d3.selectAll("g#ico").on("mouseover", function()
{ console.log("mouseover!"); });

the mouseover fire's if the mouse is over the circle element or the
path element or the text element. how can i modifiy this statement
that the mouseover fire's only on time ?


thank you for answers

[Nate Vack]

On Mon, Oct 31, 2011 at 6:58 AM, Sebbi007 <sebbis...@googlemail.com> wrote:

> how can i modifiy this statement
> that the mouseover fire's only on time ?

Put a rect element below your other stuff, and have it handle the
mouseover event:

<svg:g id="ico">
<svg:rect class="mousetarget"></svg:rect>
...
</svg:g>

d3.selectAll(".mousetarget").on("mouseover", function() {
console.log("mouseover"); });

Cheers,
-Nate

[Mike Bostock]

Some browsers support mouseenter and mouseexit now (instead of
mouseover and mouseout), which also solves this problem—but you may
also want to support older browsers so there are alternatives.

1. You could listen to a specific element rather than its group.
Nate's suggestion of a rect is one example, but your circle is another
example.

2. You can add an invisible element with pointer-events: all that
serves as an event target.

3. You can disable pointer events on other elements by using
pointer-events: none.

4. You can filter mouseover and mouseout events by looking at
d3.event.target. If you only handle events where this ==
d3.event.target, it will be equivalent to mouseenter and mouseexit.

Mike

[Sebbi007]

Thank you for all answers.

to Mike's first solution :

i've changed the listener to the Circle element and the Problem is not
solved, it fires two times too...

what do you mean with filter the mouseover and the mouseout events ?

Thx,
Sebbi

[Ryan Ewen]

I solved a similar issue using pointer-events: none, as Mike has suggested to you as #3.

To do that, just add it as an attribute, or you can even do it as CSS.

Ex:

// add image to the group but don't let it trigger mouse events

this.image_obj = this.g_obj.append('svg:image').attr('pointer-events', 'none');