What is wrong with the JavaScript event handling in this example? (Using click() and hover() jQuery
- by Bungle
I'm working on a sort of proof-of-concept for a project that approximates Firebug's inspector tool. For more details, please see this related question.
Here is the example page. I've only tested it in Firefox:
http://troy.onespot.com/static/highlight.html
The idea is that, when you're mousing over any element that can contain text, it should "highlight" with a light gray background to indicate the boundaries of that element. When you then click on the element, it should alert() a CSS selector that matches it.
This is somewhat working in the example linked above. However, there's one fundamental problem. When mousing over from the top of the page to the bottom, it will pick up the paragraphs, <h1> element, etc. But, it doesn't get the <div>s that encompass those paragraphs. However, for example, if you "sneak up" on the <div> that contains the two paragraphs "The area was settled..." and "Austin was selected..." from the left - tracing down the left edge of the page and entering the <div> just between the two paragraphs (see this screenshot) - then it is picked up. I assume this has something to do with the fact that I haven't attached an event handler to the <body> element (where you're entering the <div> from if you enter from the left), but I have attached handlers to the <p>s (where you're entering from if you come from the top or bottom).
There are also other issues with mousing in and out elements - background colors that "stick" and the like - that I think are also related.
As indicated in the related question posted above, I suspect there is something about event bubbling that I don't understand that is causing unexpected behavior.
Can anyone spot what's wrong with my code? Thanks in advance for any help!
