raphael
raphael copied to clipboard
DmitryBaranovskiy
toFront removes events in internet explorer 6
If I call toFront on a element it removes the mouseover/hover event in internet explorer.
What I am doing is stacking rectangles on a graph. On mouse over I am animating them to be slightly bigger and have an outline. On mouse out they animate back to the correct scale. This works perfectly if I remove the toFront call. I need the toFront call so we can see the bigger rectangle rather than it being hidden behind the one I have plotted above it.
Appears to remove moueout, mouseenter, mouseleave and click events as well. Likely others. Seen in IE6, IE7 and IE8
I have a SO post open on this issue.
http://stackoverflow.com/questions/3686132/move-active-element-loses-mouseout-event-in-internet-explorer
Basically toFront uses:
this.parentNode.appendChild(this);
To move the item further down the dom. If your mouse is over the element that is being moved down the dom, internet explorer doesn't register your mouse being moved out.
This is a bug with internet explorer, so toFront might need rethought somehow?
My solution was to replicate the mouse in/out by monitoring the "box" of the element being moved. If the pointer moved outside of the box then fire a mouse out function.
Very hacky as it involves monitoring mouse positions, but its only attached on mouseover (which does work) and the even is removed by the new mouse monitoring code.
Okay so I now know what is happening as explained in this answer on the question which I posted to stack overflow.
http://stackoverflow.com/questions/3686132/move-active-element-loses-mouseout-event-in-internet-explorer/4006353#4006353
To quote:
The problem is that IE handles mouseover differently, because it behaves like mouseenter and mousemove combined on an element. In other browsers it's just mouseenter.
So even after your mouse has entered the target element and you've changed it's look and reappended it to it's parent mouseover will still fire for every movement of the mouse, the element gets reappended again, which prevents other event handlers from being called.
How I have handled this is to put a boolean value on my created element.
var el = paper.path();
el.mouseovered = false;
el.mouseover(function(){
if(this.mouseovered==false)
{
this.mouseovered=true;
this.toFront();
}
});
el.mouseout(function(){
this.toBack();
this.mousedover = false;
});
cheers john - great fix for a bug that's been frustrating me all morning
Be careful with this. You can get it into a state where the mouseout isn't fired correctly. If the thing you are building effects the performance of the browser overall you can move the mouse quicker than events and things can get in a funny state.
Maybe another possible fix (when jQuery is present) would be to have something like the following if(!evData.raphIgnore) { this.toFront(); $(this.node).trigger("mouseenter", {raphIgnore: true}); }
... but then you'd need to use jQuery, not Raphael, listeners in order to be able to access the data passed in
Replicated this issue in iOS as well. http://jsfiddle.net/vitorbarbosa/FAGkY/
After the first drag event is performed (mouseup/ontouchend) the element loses the events associated to the drag.
Here's a straightforward example. http://jsfiddle.net/K2bSY/2/
In the first circle, which has no boolean toggle on the mouseover event, IE incorrectly loops the mouseover event infinite times and fails to fire the mouseout event.
In the second circle, which is identical except for a boolean toggle disabling the mouseover event until mouseout has occurred, IE behaves like normal browsers. Not only does the mouseover event occur only once, but the mouseout event occurs as normal.
The third circle simply shows that there are no issues when toFront() is not called.
And in IE11 as well.
Would be great if it could be fixed or worked around in an official Raphael version!
Hi guys, This bug is still valid with Raphael 2.1.2 and IE11. Do you plan to fix this in the near future?
