What is wrong with the JavaScript event handling in this example? (Using click() and hover() jQuery methods)_问答_开发者

What is wrong with the JavaScript event handling in this example? (Using click() and hover() jQuery methods)

开发者 https://www.devze.com 2022-12-22 00:47 出处：网络

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.

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 开发者_StackOverflow社区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?

A. if (this !== event_object.target) { // called due to event bubbling; don't handle return; }

Are you sure its not just that?

also see http://api.jquery.com/event.stopPropagation/

and you can try returning false if you want to stop the propagation also.

try putting a breakpoint on A in firebug to see what the elements are on hover

Solved it!

http://troy.onespot.com/static/highlight_fixed.html

Don't ask me how (it must be due to another intricacy of event bubbling that I haven't fully grasped), but I changed this line:

$(content_elements[x]).click(select_element).hover(highlight, remove_highlight);

to this:

$(content_elements[x]).click(select_element).mouseover(highlight).mouseout(remove_highlight);

From what I've gathered, the hover() method is preferable in most circumstances, but apparently not this one.

I also realized that what was likely happening was that, in some cases, the mouse cursor was leaving one element (such as a <p>) and "entering" another (such as the parent <div> of that <p>), but it wasn't actually "entering" the latter - it was already in it (by being within a nested element), it just wasn't calling the event on it yet because of the:

if (this !== event_object.target) { }

conditional. So, the "mouseover" component of the hover() method wasn't being called when I had assumed it should have been. Hope that makes sense and maybe helps someone down the road.