Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Fix 2367 - delegation for mouseenter with native mouseenter #2470

Closed
wants to merge 1 commit into from

1 participant

@arian
Owner

See #2367 and #2467

@arian arian 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
c58af38
@arian arian closed this
@arian arian deleted the branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 11, 2013
  1. @arian

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

    arian authored
    …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
This page is out of date. Refresh to see the latest.
View
10 Source/Element/Element.Delegation.js
@@ -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);
};
View
15 Source/Element/Element.Event.js
@@ -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
View
32 Specs/1.4client/Element/Element.Delegation.html
@@ -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>
Something went wrong with that request. Please try again.