RE: a minor confusion concerning mouse events

Thanks, all, for the description of onmouseenter and onmouseleave -- I had seen those things about here and there and wasn't quite sure what they were good for.

Sorry to belabor a point, especially since it just may be my additional misunderstanding, but the SVG example seems to behave quite different than event bubbling or tricking in HTML.

Compare

http://granite.sru.edu/~ddailey/svg/animstart1old.svg

With this HTML snippet:

<div id="Q" onmouseover="this.style.background='pink'" onmouseout="this.style.background='lightgreen'" 
style="background:lightgreen">
Hello first div is lightgreen on mouseout<br>
<span id="P" onmouseover="this.style.background='yellow'" onmouseout="this.style.background='aqua'" 
style="background:aqua">
Hello second div is aqua on mouseout<br>
</span><p style="background:#88f">And here's some text inside a paragraph tag
</p><br>
End of first div
</div>

In both there is an "outer" O container (a <g> or a <div>) with onmouseout and onmouseover. Inside is text T (either a <text> or a <p>).

In both O changes color as the mouse enters and changes back when the mouse leaves O.

In SVG the mouseout is fired when the mouse enters T (even though T and the mouse are still inside O). In HTML it doesn't.

Browsers respond differently though to the SVG:

In webkit the cursor changes to an i-beam and allows text selection by dragging
In Opera the cursor doesn't change, but allows text selection by dragging
In FF neither does the cursor change nor is text selection enabled by dragging.

I would not have expected the SVG example to behave differently than what seems like an equivalent HTML example.

Cheers
David

-----Original Message-----
From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
Sent: Saturday, September 10, 2011 12:49 PM
To: David Dailey
Cc: www-svg@w3.org
Subject: Re: a minor confusion concerning mouse events

On Sat, Sep 10, 2011 at 8:19 AM, David Dailey <ddailey@zoominternet.net> wrote:
> I suspect someone will easily convince me that the confusion is my own
> rather than the spec’s but compare the two examples:
>
> http://granite.sru.edu/~ddailey/svg/animstart1old.svg
> and
> http://granite.sru.edu/~ddailey/svg/animstart1.svg
>
> In the first, the oval changes colors, onmouseover and onmouseout (listeners
> being associated with the group it belongs to). However, the text object
> within the group seems to hijack that event, making it change colors again
> when the mouse approaches the text.
>
> I’m able to “fix” this in the second example by putting a
> pointer-events=”none” on the text, but the idea that I would have to tell
> the text to be quiet so it doesn’t disturb the group events seems a bit
> counter-intuitive.  Opera, FF, and webkit all seem to agree with each other,
> but ASV seems to agree with me.

That's how mouse events work.  Mouseover fires any time you enter an
element, and it bubbles, so descendants end up throwing a lot of
annoying noise around.  Mouseout is the same.  Those events are really
hard to use properly.

IE exposes the much more useful (non-bubbling) mouseenter and
mouseleave events, but I don't think any other browser supports them.

~TJ

Received on Sunday, 11 September 2011 13:38:54 UTC