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.
This commit is contained in:
parent
5dc6b7ce34
commit
03481a52c7
17
src/event.js
17
src/event.js
|
@ -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[ orig ] = {
|
||||
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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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){
|
||||
|
|
Loading…
Reference in a new issue