Permalink
Browse files

Fixes #2367, closes #2467 - Use the check when using delegation for m…

…ouseenter.

Since 1.4.2 the native mouseenter/mouseleave events are used, when available
(Firefox, IE). For delegation however, it should has to use mouseover/mouseout
because it should still fire each time an element is entered or left so it can
check if it matches the selector.

thanks @luisateixeira for the research/fix
  • Loading branch information...
1 parent bb1a7c6 commit 2d057ba143906547851d6b00eaea5e6728321526 @arian arian committed Feb 11, 2013
@@ -29,10 +29,12 @@ var bubbleUp = function(self, match, fn, event, target){
var map = {
mouseenter: {
- base: 'mouseover'
+ base: 'mouseover',
+ condition: Element.MouseenterCheck
},
mouseleave: {
- base: 'mouseout'
+ base: 'mouseout',
+ condition: Element.MouseenterCheck
},
focus: {
base: 'focus' + (eventListenerSupport ? '' : 'in'),
@@ -139,8 +141,8 @@ var delegation = {
};
var elementEvent = Element.Events[_type];
- if (elementEvent && elementEvent.condition){
- var __match = match, condition = elementEvent.condition;
+ if (_map.condition || elementEvent && elementEvent.condition){
+ var __match = match, condition = _map.condition || elementEvent.condition;
match = function(target, event){
return __match(target, event) && condition.call(target, event, type);
};
@@ -146,16 +146,17 @@ Element.Events = {mousewheel: {
base: (Browser.firefox) ? 'DOMMouseScroll' : 'mousewheel'
}};
+var check = function(event){
+ var related = event.relatedTarget;
+ if (related == null) return true;
+ if (!related) return false;
+ return (related != this && related.prefix != 'xul' && typeOf(this) != 'document' && !this.contains(related));
+};
+
if ('onmouseenter' in document.documentElement){
Element.NativeEvents.mouseenter = Element.NativeEvents.mouseleave = 2;
+ Element.MouseenterCheck = check;
} else {
- var check = function(event){
- var related = event.relatedTarget;
- if (related == null) return true;
- if (!related) return false;
- return (related != this && related.prefix != 'xul' && typeOf(this) != 'document' && !this.contains(related));
- };
-
Element.Events.mouseenter = {
base: 'mouseover',
condition: check
@@ -71,6 +71,20 @@
width: 300px;
}
+ #mouseenter_table {
+ border-collapse: collapse;
+ }
+
+ #mouseenter_table tr {
+ background-color: cyan;
+ color: blue;
+ }
+
+ #mouseenter_table td {
+ border: 1px solid white;
+ padding: 10px;
+ }
+
</style>
</head>
@@ -133,6 +147,17 @@
</div>
</div>
+ <h1>Mouseenter / Mouseleave with tr</h1>
+
+ <table id="mouseenter_table">
+ <tbody>
+ <tr class="box">
+ <td>COLUMN 1</td>
+ <td>COLUMN 2</td>
+ </tr>
+ </tbody>
+ </table>
+
<script>
$('mouseenter_leave').addEvents({
'mouseenter:relay(.mouse)': log.pass(['enter', true]),
@@ -141,6 +166,13 @@
log('---');
}
});
+ $('mouseenter_table').addEvents({
+ 'mouseenter:relay(tr)': log.pass(['entered tr', true]),
+ 'mouseleave:relay(tr)': function(){
+ log('left tr', true);
+ log('---');
+ }
+ })
</script>
<h1>Focus / Blur</h1>

0 comments on commit 2d057ba

Please sign in to comment.