can somebody explain Snaps' hover-event (mouseover/mouseout)?

[Raymond Uphoff aka myradon]

Okay guys, I don't understand Snap's hover behaviour. Let day a bind a hover-event to an anchor with Snap. Within that anchor is a SVG;

                    <a class="center-elem" href="#">
                        <svg version="1.1" class="arrow-icon" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="600px" height="600px" viewBox="-44 -44 600 600" style="enable-background:new -44 -44 600 600;" xml:space="preserve">
                            <circle cx="256" cy="256" r="200"/>
                            <polygon points="345.402,196.955 377.509,229.218 257.001,349.154 136.491,229.218 168.597,196.955 257,284.938"/>
                        </svg>
                    </a>

with a snippet of snap;

            anchor.hover(function(event) {
                console.info(event.target);
                animating = false;//stop feed-forward animation when hovered
                arrow.animate( {transform : 's1.5 1.5' }, duration, easing);

            }, function() {
                animating = true;//stop feed-forward animation when hovered
                animCircleOutward();
            });

A can see in console-tab of Firebug that the targets are all elements within anchor. The anchor itself is never the target. How is that possible because I bind event to the anchor. How do I stop the bubbling of the childs of the anchor?! event.stopProgagation(); doesn't work because it shouldn't bubble up the DOM from the anchor. That's not the problem it's the childs that will trigger the event so: svg, circle and polygon. I really don't get this. What's the deal?

[Anthony Greco]

I'm just taking a stab at this since I don't fully see the issue and to be more forthcoming I'm still new to Snap as well. What is the arrow variable for example? The Snap instance? i.e. the SVG node. Could you create a JSFiddle? I'm guessing you're hover method is via jQuery, whereas I think you want to use Snap's hover event for elements within the SVG. So if the arrow variable is a Snap element, when you create it also attach the hover event.

Something like:

var paper = new Snap(600, 600),

someShape = paper.rect(0, 0, 10, 10).attr({fill: '#000'});

someShape.mouseover(function(event) {

    console.log('mouseover', event);

}).mouseout(function() {

    console.log('mouseout', event);

});

Hope that helps!

[Raymond Uphoff aka myradon]

Hey Anthony. I tried the evnts with jQuery and Snap. I think it's because of the bubbling that you'll get strange (visual) behaviour on mouseenter en mouseleave events. In my example you can see an anchor has been wrapped around an svg. I only want hovering on the A-lement triggering an Snap-animation. What happens if you move the mouse just above the anchor also the svg-,circle- and polygon-element will trigger a mouseenter-event and it bubbles up to the anchor where the handler is bind. My animations look like crap because the event is triggered several of times. I got stuttering animations on all the code I write with Snap. Later on I'll build a test on jsFiddle.

[Raymond Uphoff aka myradon]

Okay guys tried my animations on jsFiddle, the animations wont work like straight in the browser. So I'll link to my test-environment http://www.myradon.net

1. when you scroll down the green header#intro towards the white section 'diensten' the navigation will appear. This nav is a bunch of li's with anhcors as child's. These anchors are wrapped around SVG's. I animate de dashoffset with Snap and it's hover-method. This works like a charm. No problems. Code is line 28 to 52 in myradon-snap.js
   
2. In the green header#intro there is also a button. This button is an anchor wrapped around a SVG. Now this code is, for testing purposes, in myradon.js from line 208 to 260. I've also tested to bind events straight in Snap but same behaviour (outcommented code in myradon-snap.js from line 100 to 138). I think because of the bubbling of the mouseenter and mouseleave events towards the anchor where the handler has been bind to it triggers multiple times when hovering above the anchor/button. This causes strange behaviour. I thought well try this if (event.target === event.currentTarget) { //then snap-stuff } within the handler but doesn't play nice.
3. If you scroll towards the dark section 'mijn werk' there is a grid with elements. When you hover of one of these items an SVG will animate with Snap. Code is line 164 to 183 in myradon-snap.js The hover-event is bind on all the anchors. Look what happens of you hover when on the image when the SVG will animate down. And look what happens if you put the cursor down in the image. The animation will behave different. It's like when hovering above the animating SVG the animation will stop quick/ decay it short. I really don't get this behavior. 

When you open the debug console you can see some debug info. Does somebody had a clue why this behaviour happens and how can I solve this?

[Ian]

Had a quick look, its really difficult to see when you can't fiddle with the code or see what you are seeing to replicate properly. There's a lot going on with the page, that I can't quite work out if its normal or not, as I'm not sure what the correct behaviour is, and its hard to explain in words. 

I'd try and isolate the problem into one simple obvious chunk somewhere, an single example should work on a fiddle or jsbin (rather than the whole page or something), and I think often the process of breaking it down to be shown, helps in itself.

[Raymond Uphoff aka myradon]

Okay I've got it working in jsFiddle. I've made 3 fiddles so you can see what I'm talking about cause the behaviour is the same.

1. Navigation: http://jsfiddle.net/myradon/gnV8X/
2. The button: http://jsfiddle.net/myradon/3Wgkf/
3. Grid with 2 elements: http://jsfiddle.net/myradon/VCXU9/3/
   

[Anthony Greco]

So I'm still not 100% certain of what your issue is. :P But I think maybe this is just "getting a reference to a target" issue? Perhaps you're wanting event.currentTarget? http://jsfiddle.net/anthonygreco/gnV8X/1/

[Ian]

The third one works for me ok I think (I can't spot any weird animation effects, but maybe I'm looking in wrong place), I'm wondering if its browser specific that makes it worse ? (I've tried in Chromium & Firefox). If necessary could you just put an if statement in there to check the element type if needed or something (if thats whats causing the problem).

Ian

[Anthony Greco]

Same. Still unsure of what you're intended outcome is. Could you mock up the expected result in an image or something maybe?

[Raymond Uphoff aka myradon]

The button-fiddle I've add clearTimeout function and stop().  This helps triggering te excution of the function 1 more time. See the update fiddle http://jsfiddle.net/myradon/3Wgkf/4/ This one is okay now

Hey Anthony, the navigation-example was an example that was without problems as I wrote some posts back. You couldn't find the problem because there wasn't one ;-)  I've add this one to show wrapping anchors around SVG's and let Snap do it's thing is no problem. But If you check my third jsFiddle you'll see that hovering on other child-elements within the anchor causes wierd animations effects

[Raymond Uphoff aka myradon]

Ian if you check the third fiddle you'll see that if you enter the spinner-image from the bottom upward with you're mouse, it will have a normal elastic-easing. Try the same thing but then enter with your mouse from the top and slowly hover above the maginifier-icon or the heading. the mina.elastic isn't so elastic anymore.

[Ian]

Oddly It seems fine for me (at least perception wise, I can't really notice any difference), either from the top or the bottom, its elastic. I wonder if its a performance thing, so its more noticable on certain setups ? (btw I'm away a few days, if no reply from me). I also notice the top part of the image pops out a bit if I scroll in/out with browser, but maybe just as its a test case.

[Raymond Uphoff aka myradon]

Ian, that's strange because I've got it on my Hackintosh desktop in Firefox and Chrome. Also my new Macbook Pro Retina has the same results in Chrome en Firefox. When you hover slowly above the childs, heading and svg-icon, the animation just behaves different; almost no elastic easing or a faint easing.

[Anthony Greco]

I can't replicate this issue either. I'm on OS X and using Chrome (33.0.1750.146) and FF (27.0.1) seems fine for me. Here's a screen cast even. :P http://thisisa.simple-url.com/screenCast.mov

Not sure why you're seeing odd results. :\

[Raymond Uphoff aka myradon]

Haha nice one Anthony my own show ;-) Look mam I'm famous. Okay you don't see it because you didn't hover above the heading "twitter driven app" or the maginifier-icon. If you do that you'll see what I'm talking about.  1) Try first hover on spinner-image from the bottom, look at the easing and time time the animation takes. 2) come in with the mouse eg from the top and during the animation enter the heading- or magnifier-region.

Okay I made my own capture. Only check the first 30seconds or so. Watch episode 2 http://www.myradon.nl/snap-thumbs.mov

[Anthony Greco]

This is very strange indeed. Not sure what's causing it. I'm actually not crazy about the way animation is done in Snap. Not that I'm knocking on Snap though! :D

I actually use GSAP (http://www.greensock.com/gsap-js/) to handle all of my animations as it gives me MUCH more control and seems to be just as, if not more, performant. I wrote a SnapPlugin for the GSAP guys but they haven't had time to merge it in yet, though you could snag it from me directly if needed.

Here's a simple Fiddle showing some examples of usage I made a while back. http://jsfiddle.net/anthonygreco/sa54R/

I've got some other things to address immediately (damn day jobs...lol) but if I get the time I may try and look deeper into what's causing your issue this weekend.

[Ian]

I can't really test from where I am atm, but looking at the nature of the movie, my suspicion would be your animation affecting the hover outs. Just thinking here...

Logically with the setup of elements and animation, you hover over an element, an element is animated to 'underneath' where your cursor is (even if temporarily). So are you still hovering over that element, or have you now essentially caused a hoverout event (which may then trigger another animation and then another event?) I'm guessing there's a few hard to follow events going on that are clashing. 

If thats the case, I'm not sure on the solution. You could maybe make the animation continue to its end whatever, and only let another animation start afterwards ? Its quite fiddly if this is the case (probably needs breaking down logically what you want to happen with each possibility, and what users would expect to happen).

[Anthony Greco]

Ahhh, I think I'm on to something. :P The hover event is actually being triggered several times via multiple nodes. So adding the css pointer-events: none; on the elements that shouldn't trigger the event seems to solve it. Looks like that at least resolves the multiple calls of the hover in/out events, and while I checked in Chrome and Firefox, I just forked the fiddle and when I discovered this, did some research. New fiddle here: http://jsfiddle.net/anthonygreco/24VSY/

Compatibility of that css rule is interesting actually. For the HTML spec, IE didn't decide to join the pointer-events game till 11, the most current version: http://caniuse.com/pointer-events, but pointer-events has apparently been in the SVG spec for some time now: http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty. A little more info here: http://stackoverflow.com/questions/9385213/how-to-make-internet-explorer-emulate-pointer-eventsnone (not to sure about the "javascript solution" there though, but the other article looked like an interesting read)

I mention both the HTML and SVG spec because I believe I added the rule to both, but you could go through removing to test this further and iron out the kinks and if you have control of the markup maybe even just shifting DOM structure a bit would help mitigate this even further.

Hope this helps!

[Raymond Uphoff aka myradon]

Guys I really appreciate your thorough feedback. I'm going to check the fiddles on my desktop. Never heard about the css pointer-events property, I'm going to read about it a bit.

[Raymond Uphoff aka myradon]

Hey guys, okay Anthony I've tested a bit with pointer-events. It appears IE9 + IE10 support inline-style style="pointer-events: none" so not setting it as an attribute of SVG. I found a polyfill but I can't get it working for IE9.
Also I found out he path-morfing-animation causes IE9 to crash.. So IE9 crashes in jsFiddle, on my website and even on the idea where i got it from over at Codrops; http://tympanus.net/Tutorials/ShapeHoverEffectSVG/index2.html.

[Raymond Uphoff aka myradon]

I've tested IE9 on an old laptop with IE9 and it doesn't crash. So it seems to be VirtualBox along with  Windows Vista virtualguest causing crash. So probably Virtualbox graphics driver or lack of D3D is causing problems