将事件处理程序绑定到特定元素，使用冒泡（JavaScript / jQuery） [英] Binding event handlers to specific elements, using bubbling (JavaScript/jQuery)
问题描述
我正在研究一个近似Firebug检查工具功能的项目。也就是说，当鼠标悬停在页面上的元素上时，我想突出显示它们（通过改变背景颜色），当点击它们时，我想执行一个构建可以使用的CSS选择器的函数确定它们。
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 confused 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:
- 我只对含有文本节点（或带有文本节点的任何后代元素）的元素感兴趣。 / li>
- 当鼠标进入这样的元素时，更改其背景颜色。
- 当鼠标离开该元素时，将其背景颜色更改为
- 当单击元素时，执行为该元素构建CSS选择器的函数。
- 我不想要鼠标悬停元素的边缘区域计为该元素的鼠标悬停，但对于下面的元素（我认为这是默认的浏览器行为？）。
- 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?).
我可以处理突出显示/不亮的代码，并构建CSS选择器。我主要遇到的问题是将事件处理程序有效绑定到我想要突出显示/可点击的元素，并避免/停止冒泡，以便通过（< p>）元素上的鼠标也不会执行处理程序函数例如在< body>上。我认为这样做的正确方法是将事件处理程序绑定到文档元素，然后以某种方式使用冒泡仅在最上面的元素上执行绑定函数，但是我不知道该代码是什么样的，那真的是我可以使用帮助。
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.
我正在使用jQuery，并希望尽可能依赖这些。
I'm using jQuery, and would like to rely on that as much as possible.
提前感谢任何指导！
推荐答案
这将是相当有问题的，因为你不能直接样式文档中的文本节点。这意味着如果你有这样的东西：
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>
当您尝试将文本块修复到< ; div> ，您需要以< 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.)
有一个高亮的插件，你可以看看作为一个指导，你可以如何用< span> 替换具有某些给定类的标签的简单文本节点。该插件旨在让您创建您搜索的单词/短语，但并不是非常复杂，您可能会适应。该插件位于： http：// johannburkard .de / blog / programming / javascript / highlight-javascript-text-higlighting-jquery-plugin.html
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
这篇关于将事件处理程序绑定到特定元素，使用冒泡（JavaScript / jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
