使用冒泡（JavaScript/jQuery）将事件处理程序绑定到特定元素

我正在做一个类似Firebug的inspector工具功能的项目。也就是说，当鼠标移到页面上的元素上时，我想突出显示它们（通过更改它们的背景色），当单击它们时，我想执行一个函数，该函数构建一个CSS选择器，可以用来识别它们

然而，我一直遇到与事件冒泡相关的问题，并彻底弄糊涂了自己。与其走这条路，不如解释一下我想做什么，并在开始时寻求一些帮助。以下是一些规格：

• 我只对包含文本节点的元素（或包含文本节点的任何子元素）感兴趣
• 当鼠标进入此类元素时，请更改其背景色
• 当鼠标离开该元素时，将其背景颜色更改回原来的颜色
• 单击某个元素时，执行一个为该元素构建CSS选择器的函数
• 我不想让元素边距区域上的鼠标悬停算作该元素的鼠标悬停，但要算作下面的元素的鼠标悬停（我认为这是默认的浏览器行为？）

我可以处理高亮显示/取消高亮显示的代码，并构建CSS选择器。我主要遇到的问题是有效地将事件处理程序绑定到我想要高亮显示/可单击的元素，并避免/停止冒泡，以便在（）元素上鼠标移动时不会同时在上执行处理程序函数，例如。我认为正确的方法是将事件处理程序绑定到document元素，然后以某种方式使用bubbling只在最顶层的元素上执行绑定函数，但我不知道该代码是什么样子，这正是我需要帮助的地方

---

我正在使用jQuery，并且希望尽可能地依赖它。

您可以将事件侦听器添加到document.body。处理函数可以检查事件，以确定最初以哪个元素为目标。如果您使用的是Prototype库，您将使用：

---

我知道您正在使用jQuery，但我确信它具有相同的功能；我只是对它不太熟悉。

这将是一个相当大的问题，因为您无法直接为文档中的文本节点设置样式。这意味着如果你有这样的东西：

<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>

你好，世界，你好吗

首先，外面天气很好
第二，重要的是你

当您尝试重新设置该

标题处的文本块的样式时，您需要这样做，即

的其余部分也不会获得新的背景色。（至少，我认为这是你的要求。）

---

jQuery有一个“highlight”插件，您可以将其作为一个指南，了解如何使用具有某些给定类的

标记替换简单的文本节点。该插件旨在让您为搜索的单词/短语设置样式，但它并不十分复杂，您可以对其进行调整。插件在这里：

谢谢，尖头-我认为你的例子实际上会产生预期的效果。如果用户将鼠标悬停在“Hello world您好”，那么我想突出显示包含它的整个节点，包括所有子节点。原因是，我想生成一个对应高亮显示文本的CSS选择器。由于没有CSS选择器只匹配“Hello world how are you”，而不匹配的其他子代，这仍然会导致所需的行为。啊，如果这是您想要做的，我认为这很容易-我会更新我的答案。