Permalink
Browse files

Stop trying to emulate the focus/blur event in IE, doesn't work as on…

…e might expect, anyway. Instead, implement the focusin/focusout events in all other browsers - which creates a much better parity across all browsers. Uses event capturing instead of bubbling to make it happen. Thanks to Alexander for the recommendation and to Joern Zaefferer for the original focus/blur delegation code.
  • Loading branch information...
Jörn Zaefferer authored and jeresig committed Dec 21, 2009
1 parent 5dc6b7c commit 03481a52c72e417b01cfeb499f26738cf5ed5839
Showing with 39 additions and 17 deletions.
  1. +15 −16 src/event.js
  2. +0 −1 src/support.js
  3. +24 −0 test/delegatetest.html
View
@@ -720,24 +720,23 @@ function trigger( type, elem, args ) {
}
// Create "bubbling" focus and blur events
if ( !jQuery.support.focusBubbles ) {
if ( document.addEventListener ) {
jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ){
jQuery.event.special[ fix ] = {
setup: function() {
this.addEventListener( orig, handler, true );
},
teardown: function() {
this.removeEventListener( orig, handler, true );
}
};
jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ){
jQuery.event.special[ orig ] = {
setup: function() {
jQuery.event.add( this, fix, ieHandler );
},
teardown: function() {
jQuery.event.remove( this, fix, ieHandler );
function handler( e ) {
e = jQuery.event.fix( e );
e.type = fix;
return jQuery.event.handle.call( this, e );
}
};
function ieHandler() {
arguments[0].type = orig;
return jQuery.event.handle.apply(this, arguments);
}
});
});
}
jQuery.each(["bind", "one"], function(i, name) {
View
@@ -111,7 +111,6 @@
jQuery.support.submitBubbles = eventSupported("submit");
jQuery.support.changeBubbles = eventSupported("change");
jQuery.support.focusBubbles = eventSupported("focus");
// release memory in IE
root = script = div = all = a = null;
View
@@ -75,6 +75,24 @@ <h2>Change Tests</h2>
<td id='textbind' class="red">TEXT</td>
<td id='textareabind' class="red">TEXTAREA</td>
</tr>
<tr>
<td>Focusin:</td>
<td id='selectfocus' class="red">SELECT</td>
<td id='mselectfocus' class="red">MULTI</td>
<td id='checkboxfocus' class="red">CHECKBOX</td>
<td id='radiofocus' class="red">RADIO</td>
<td id='textfocus' class="red">TEXT</td>
<td id='textareafocus' class="red">TEXTAREA</td>
</tr>
<tr>
<td>Focusout:</td>
<td id='selectblur' class="red">SELECT</td>
<td id='mselectblur' class="red">MULTI</td>
<td id='checkboxblur' class="red">CHECKBOX</td>
<td id='radioblur' class="red">RADIO</td>
<td id='textblur' class="red">TEXT</td>
<td id='textareablur' class="red">TEXTAREA</td>
</tr>
</table>
<h2>Submit Tests</h2>
<table>
@@ -112,6 +130,12 @@ <h2>Submit Tests</h2>
<script type='text/javascript'>
jQuery.fn.addChangeTest = function( id, prevent ) {
this.bind("focusin", function(){
jQuery(id + "focus").blink();
}).bind("focusout", function(){
jQuery(id + "blur").blink();
});
return this.bind("change", function(e){
jQuery(id + "bind").blink();
}).live("change", function(e){

0 comments on commit 03481a5

Please sign in to comment.