deac/jquery
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Stop trying to emulate the focus/blur event in IE, doesn't work as one 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.

Browse source
This commit is contained in:
Jörn Zaefferer 2009-12-21 16:10:21 -05:00 committed by jeresig
parent 5dc6b7ce34
commit 03481a52c7
3 changed files with 39 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/event.js
View file

@ -720,24 +720,23 @@ function trigger( type, elem, args ) {
}
// Create "bubbling" focus and blur events
if ( !jQuery.support.focusBubbles ) {
jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ){
jQuery.event.special[ orig ] = {
if ( document.addEventListener ) {
jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ){
jQuery.event.special[ fix ] = {
setup: function() {
jQuery.event.add( this, fix, ieHandler );
this.addEventListener( orig, handler, true );
},
teardown: function() {
jQuery.event.remove( this, fix, ieHandler );
this.removeEventListener( orig, handler, true );
}
};
function ieHandler() {
arguments[0].type = orig;
return jQuery.event.handle.apply(this, arguments);
function handler( e ) {
e = jQuery.event.fix( e );
e.type = fix;
return jQuery.event.handle.call( this, e );
}
});
});
}
jQuery.each(["bind", "one"], function(i, name) {

1
src/support.js
View file

@ -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;

24
test/delegatetest.html
View file

@ -75,6 +75,24 @@
<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 @@
<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){