mouseenter and mouseleave events don't fire when an element is resized from under it.
1,022 views
Skip to first unread message
Ngan
Aug 26, 2009, 12:21:13 PM8/26/09
to Prototype: Core
I'm only having problems with mouseleave (mouseenter doesn't concern
me as much). If an element is resized to be smaller and the mouse is
no longer over the element, the element fails to fire a "mouseleave"
event. I've tested this in FF 3.5x, Safari 4.0.3, and IE8. IE8 works
properly, but FF and Safari does not.
Is this a bug? or how it's suppose to be?
Thanks!
me as much). If an element is resized to be smaller and the mouse is
no longer over the element, the element fails to fire a "mouseleave"
event. I've tested this in FF 3.5x, Safari 4.0.3, and IE8. IE8 works
properly, but FF and Safari does not.
Is this a bug? or how it's suppose to be?
Thanks!
Simon Charette
Aug 26, 2009, 6:01:55 PM8/26/09
to prototy...@googlegroups.com
Can you provide a test case, it would make it easier to test on our side.
It looks rather like a browser issue due to the way mouse events are handled than a Prototype problem to me.
It looks rather like a browser issue due to the way mouse events are handled than a Prototype problem to me.
2009/8/26 Ngan <ngan...@gmail.com>
Ngan
Aug 26, 2009, 10:48:33 PM8/26/09
to Prototype: Core
I just posted a test script. Just realized that IE8 fails as well...
maybe it's just how it is...
<html>
<head>
<title>mouseenter/mouseleave test</title>
<script src="js/prototype.js" type="text/javascript"></script>
<script>
function addToConsole(consoleDiv, msg) {
msgE = new Element('div');
msgE.update(msg);
consoleDiv.insert({top: msgE});
}
Event.observe(window, 'load', function() {
var consoleDiv = $('console');
$('test1').observe('mouseenter', function() {
addToConsole(consoleDiv, 'mouseenter');
});
$('test1').observe('mouseleave', function() {
addToConsole(consoleDiv, 'mouseleave');
});
$('test1').observe('click', function() {
$('test1').remove();
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<div style="width: 300px; height: 150px;">
<div id="test1" style="width: 300px; height: 150px; border:
1px solid black; text-align: center">
<h3>Mouse Box</h3>
<p>Click to remove</p>
</div>
</div>
<h3>Console:</h3>
<div id="console" style="width: 300px; height: 300px; border:
1px solid gray; overflow: auto">
</div>
</td>
<td valign="top" style="padding-left: 20px">
<h1>Notes:</h1>
<h2>Firefox, IE8, Chrome (Fail):</h2>
<ul>
<li>Clicking on any part of the mouse box will not fire a
mouseleave.</li>
</ul>
<h2>Safari (Partial Fail):</h2>
<ul>
<li>Clicking on "Click to remove" or "Mouse Box" will not
fire a mouseleave. However, any other part of the mouse box will fire
properly.</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
On Aug 26, 3:01 pm, Simon Charette <charett...@gmail.com> wrote:
> Can you provide a test case, it would make it easier to test on our side.
>
> It looks rather like a browser issue due to the way mouse events are handled
> than a Prototype problem to me.
>
> 2009/8/26 Ngan <nganp...@gmail.com>
maybe it's just how it is...
<html>
<head>
<title>mouseenter/mouseleave test</title>
<script src="js/prototype.js" type="text/javascript"></script>
<script>
function addToConsole(consoleDiv, msg) {
msgE = new Element('div');
msgE.update(msg);
consoleDiv.insert({top: msgE});
}
Event.observe(window, 'load', function() {
var consoleDiv = $('console');
$('test1').observe('mouseenter', function() {
addToConsole(consoleDiv, 'mouseenter');
});
$('test1').observe('mouseleave', function() {
addToConsole(consoleDiv, 'mouseleave');
});
$('test1').observe('click', function() {
$('test1').remove();
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<div style="width: 300px; height: 150px;">
<div id="test1" style="width: 300px; height: 150px; border:
1px solid black; text-align: center">
<h3>Mouse Box</h3>
<p>Click to remove</p>
</div>
</div>
<h3>Console:</h3>
<div id="console" style="width: 300px; height: 300px; border:
1px solid gray; overflow: auto">
</div>
</td>
<td valign="top" style="padding-left: 20px">
<h1>Notes:</h1>
<h2>Firefox, IE8, Chrome (Fail):</h2>
<ul>
<li>Clicking on any part of the mouse box will not fire a
mouseleave.</li>
</ul>
<h2>Safari (Partial Fail):</h2>
<ul>
<li>Clicking on "Click to remove" or "Mouse Box" will not
fire a mouseleave. However, any other part of the mouse box will fire
properly.</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
On Aug 26, 3:01 pm, Simon Charette <charett...@gmail.com> wrote:
> Can you provide a test case, it would make it easier to test on our side.
>
> It looks rather like a browser issue due to the way mouse events are handled
> than a Prototype problem to me.
>
Simon Charette
Aug 26, 2009, 11:39:30 PM8/26/09
to prototy...@googlegroups.com
I see what you mean, however I think this implementation is the correct behavior according to W3C DOM Events (see mouseover and mouseout).
The mouseover event occurs when the pointing device is moved onto an element. This event is valid for most elements.
2009/8/26 Ngan <ngan...@gmail.com>
Reply all
Reply to author
Forward
0 new messages