Binding event handlers to specific elements, using bubbling (JavaScript/jQuery)
I'm working on a project that approximates the functionality of Firebug's inspector tool. That is, when mousing over elements on the page, I'd like to highlight them (by changing their background color), and when they're clicked, I'd like to execute a function that builds a CSS selector that can be used to identify them.
However, I've been running into problems related to event bubbling, and have thoroughly conf开发者_如何学运维used myself. Rather than walk you down that path, it might make sense just to explain what I'm trying to do and ask for some help getting started. Here are some specs:
- I'm only interested in elements that contain a text node (or any descendant elements with text nodes).
- When the mouse enters such an element, change its background color.
- When the mouse leaves that element, change its background color back to what it was originally.
- When an element is clicked, execute a function that builds a CSS selector for that element.
- I don't want a mouseover on an element's margin area to count as a mouseover for that element, but for the element beneath (I think that's default browser behavior anyway?).
I can handle the code that highlights/unhighlights, and builds the CSS selector. What I'm primarily having trouble with is efficiently binding event handlers to the elements that I want to be highlightable/clickable, and avoiding/stopping bubbling so that mousing over a (<p>) element doesn't also execute the handler function on the <body>, for example. I think the right way to do this is to bind event handlers to the document element, then somehow use bubbling to only execute the bound function on the topmost element, but I don't have any idea what that code looks like, and that's really where I could use help.
I'm using jQuery, and would like to rely on that as much as possible.
You can add an event listeners to document.body. The handler function can inspect the event to figure out which element was originally targeted. If you were using the Prototype library, you would use this:
http://prototypejs.org/api/event/element
I know you're using jQuery, but I'm sure it has equivalent functionality; I'm just not as familiar with it.
This is going to be fairly problematic, because you can't directly style the text nodes in your document. That means that if you've got something like this:
<div>
Hello world how are you
<ul>
<li>First of all, it is a lovely day outside</li>
<li>Second, it's important that you
<a href='http://somewhere.else'>click here</a>
</li>
</ul>
</div>
Well when you try to restyle the text block at the head of that <div>, you'll need to do it in such a way that the rest of the <div> doesn't also get a new background color. (At least, I think that's what you're asking for.)
There's a "highlight" plugin for jQuery that you might look at as a guide to how you can replace simple text nodes with <span> tags that have some given class. The plugin is intended to let you style words/phrases that you search for, but it's not terribly complicated and you might be able to adapt it. The plugin is here: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
加载中,请稍侯......
精彩评论