Not sure if this is a bug report, feature request, help request, or even just a complaint about the state of the world :)
Using Prototype 1.7 rc2, I have been exploring event delegation with the new Element#on functionality, using the css selector filter. My initial tests with click (and dblclick) events worked fine, but when I moved on to blur and focus, things broke. The blur and focus events work fine as long as the the '.on' is for the actual (in my sample) input fields, but the events do not trigger (bubble) if I set the handler on an ancestor element. It is *possible* to get the functionality (bubbling) to work, by bypassing some of the prototype functionality, using .addEventListener (for most browsers), and .observe with 'focusin' and 'focusout' events (for IE). (I found a sample for that at http://www.ruby-forum.com/topic/159048, tried a variation of the code at http://pastie.org/pastes/186221). That though falls back on the old techniques, where the handler needs do something like findElement to figure out what the 'requested' event should be associated with. So: Is there a way to get $(ele).on( some_event, css_selector ) ... to trigger for blur and focus events on descendant elements of ele with rc2? Is that 'intended' to work with the latest code, since it is supposed to "provide first-class support for event delegation"? The 'basic' code I am trying to use is: DelegationExplorer.start( ele, 'click', '.special' ); DelegationExplorer.start( ele, 'dblclick', '.special' ); DelegationExplorer.start( ele, 'blur', '.special' ); DelegationExplorer.start( ele, 'focus', '.special' ); ... start: function(){ ... this.handlers[localEvn][eleId] = $(eleId).on( localEvn, localSel, function( triggerEvent, matchElement ) { DelegationExplorer.genericHandler( triggerEvent, matchElement ); }); were ele is an ancestor of an input field [type=text or textarea]. I have debug / introspection / reporting code in genericHandler to tell which events are getting through. Click and dblclick get reported, blur and focus do not. Using: this.handlers[localEvn][eleId] = $(eleId).on( localEvn, function( triggerEvent, matchElement ) { DelegationExplorer.directHandler( triggerEvent, matchElement ); }); triggers just fine, when eleId is the actual input field. The 'fudge' to get [most of] the functionality (without the css filter) is: var myRoot = $('frm'); if( myRoot.addEventListener ) { myRoot.addEventListener( 'focus', DelegationExplorer.directHandler, true ); myRoot.addEventListener( 'blur', DelegationExplorer.directHandler, true ); } else { // IE supports focusin and focusout myRoot.observe( 'focusin', DelegationExplorer.directHandler ); myRoot.observe( 'focusout', DelegationExplorer.directHandler ); } where frm is again an ancestor of the input fields -- mMerlin -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
