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

Question

我正在研究一个类似于Firebug的检查器工具功能的项目。也就是说，当将鼠标悬停在页面上的元素上时，我想突出显示它们（通过更改它们的背景色），并且在单击它们时，我想执行一个构建可以使用的CSS选择器的函数。以识别它们。

但是，我一直遇到与事件冒泡有关的问题，并彻底弄糊涂了自己。与其说服您走那条路，不如说我正在尝试做的事并寻求入门帮助。以下是一些规格：

• 我只对包含文本节点的元素（或具有文本节点的任何后代元素）感兴趣。
• 当鼠标输入这样的元素时，请更改其背景颜色。
• [当鼠标离开该元素时，将其背景颜色更改回原来的颜色。
• 单击元素时，执行为该元素构建CSS选择器的函数。
• 我不希望将元素的空白区域上的鼠标悬停视为该元素的悬停，而是其下的元素的鼠标悬停（我仍然认为这是默认的浏览器行为？）。

我可以处理突出显示/取消突出显示的代码，并构建CSS选择器。我主要遇到的麻烦是将事件处理程序有效地绑定到我想突出显示/单击的元素上，并避免/停止冒泡，以便将鼠标移到（

）元素上也不会在上面执行处理程序功能例如，

。我认为执行此操作的正确方法是将事件处理程序绑定到document元素，然后以某种方式使用冒泡功能仅在最顶层的元素上执行绑定函数，但是我不知道该代码的外观，这真的在哪里可以使用帮助。

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

Answer 1

您可以将事件监听器添加到document.body。处理函数可以检查事件以找出最初定位的元素。如果您使用的是原型库，则可以使用以下方法：

http://prototypejs.org/api/event/element

我知道您使用的是jQuery，但我确定它具有同等的功能；我只是不那么熟悉。

Answer 2

这将是一个相当大的问题，因为您不能直接设置文档中文本节点的样式。这意味着，如果您有类似这样的内容：

<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>其余部分也不会获得新的背景色的方式进行处理。 （至少，我认为这就是您要的。）

[您有一个jQuery的“突出显示”插件，您可以将其作为如何使用具有某些给定类的<span>标签替换简单文本节点的指南。该插件旨在让您为搜索的单词/短语设置样式，但并不十分复杂，您也许可以对其进行调整。插件在这里：http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html