Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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 03481a5
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 17 deletions.
31 changes: 15 additions & 16 deletions src/event.js
Expand Up @@ -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) {
Expand Down
1 change: 0 additions & 1 deletion src/support.js
Expand Up @@ -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;
Expand Down
24 changes: 24 additions & 0 deletions test/delegatetest.html
Expand Up @@ -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>
Expand Down Expand Up @@ -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){
Expand Down

0 comments on commit 03481a5

Please sign in to comment.