Here's a tip for using firebug to debug your issue: try console.log( event.target) instead of alert(). When debugging events (especially focus), an alert pop-up can interfere a lot. Besides, console.log will give you all sorts of details that alert() won't give you. Try console.log(event) even, then you'll be able to see more than just target, and you can compare all 6.
Now, as far as the problem you're having, I'm going to guess you're using IE and learning how broken its event model is. If you haven't already, you'll want to read here: http://www.quirksmode.org/js/events_order.html Assuming you aren't using IE and have a decent DOM and event model, perhaps a different approach: it looks like what you're trying to do is highlight the focus by changing the appearance of some parent/container element? That could be done by adding a class (rather than setting the style directly, using .css( { background: "#666666", color: "#DDDDDD"} ); ). Other than just being a good practice it (seperate behavior from presentation), it makes it so you can identify that element in the future (ex. to turn it off). This way you can forget about the ID even. When the focus changes, remove that special highlight focus class from wherever it is -- $('.focused').removeClass('focused'); -- then add it to the new appropriate focus-highlight-able ancestor. Here's some sample code I put together that does just that: $(function() { $('*:not(.focusbox)').focus(function(ev) { ev.currentTarget = this; addFocus(ev) }).blur(function() { removeFocus(); }); $('.focusbox').click(function(ev) { ev.currentTarget = this; addFocus(ev); }) }); function addFocus(ev) { removeFocus(); var $target = $(ev.currentTarget); var focusbox = $target.is('.focusbox') ? $target : $target.parents('.focusbox:first'); focusbox.addClass('focused'); if (focusbox.length) // Only prevent propagation if there was a focusbox self or parent found ev.stopPropagation(); } function removeFocus() { $('.focused').removeClass('focused'); } A couple things to note: * On every element of the page except these DIVs that I've classed 'focusbox' I'm binding to focus and blur. That way we're sure to catch any keyboard/other non-click focusing (TAB, SHIFT-TAB, focus() ). * I'm setting ev.currentTarget to 'this'. Event.currentTarget is a W3C DOM Event property IE is missing (see quirksmode page above). Perhaps this is something jQuery could normalize? This page suggests that hasn't been done: http://docs.jquery.com/Events#bind.28_type.2C_data.2C_fn_.29 Here's the full code for my sample page: http://pastie.caboo.se/89030 - Richard On 8/17/07, Mitch <[EMAIL PROTECTED]> wrote: > > > Thank you Mike. I discovered that the best first "documentation" to > read can be found by clicking on every screen shot on the main page, > and printing each out and then trying every feature they so describe > with terrific brevity (like one or two sentences :) > > I'm beginning to see how to use Firebug. But I am stuck on how to get > it to help me with my foucs unfocus issue. I have this little snippet > of code > > $("div:not('#matchcontainer')").click(function() { > $("#text800birds").css( { background: "#666666", color: > "#DDDDDD"} ); > }); > > I have it working in my How To > > http://www.whatbird.com/wwwroot/Components/jQuery_How_Do_I_not.html > > But I am unable to implement it in my real application > > http://www.whatbird.com/wwwroot/Components/Complete_Search_Tab2.html > > Note the rectangle around the text "880 Birds of North America". When > you click anywhere but the left container (scrolling list of birds). > Yet when I click on the matchcontainer it still triggers the handler. > The "not" is suppose to prevent it from selecting matchcontainer. > > The DOM of my app is pretty complicated but matchcontainer is > definitely inside all the other divs so it should be matched. > > When I put an "alert("here") statement inside the snippet above and > click anywhere I get the alert pop 6 times! Which means its matching > many other divs and it should not. > > I am at wits end as to what to do next to find out why. > > Mitch > > On Aug 17, 8:50 am, "Mike Alsup" <[EMAIL PROTECTED]> wrote: > > Look at all the "Learn More" links on the main page. There is some > > good stuff. Maybe not exactly what you're looking for, but there is > > some useful info. > > > > > > > > > Have you looked at the "documentation"? They have a one page FAQ, > > > console reference, keyboard reference and jQuery Lite. I dont see > > > anything like "how to use Firebug to debug". > > > > >http://getfirebug.com/docs.html > > > > > Maybe there is another link to a tutorial?- Hide quoted text - > > > > - Show quoted text - > >
