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!
