Question

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

然而，我一直在遇到与事件冒泡有关的问题，并且让我自己完全糊涂了。而不是让你沿着这条路走下去，只是解释我正在尝试做什么并寻求一些帮助开始可能是有意义的。以下是一些规格：

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

我可以处理突出显示/取消突出显示的代码，并构建CSS选择器。我主要遇到的问题是将事件处理程序有效地绑定到我想要突出显示/可点击的元素，并避免/停止冒泡，以便鼠标悬停在（＆lt; p＆gt;）元素上也不会执行处理函数例如，在＆lt; body＆gt;上。我认为正确的方法是将事件处理程序绑定到document元素，然后以某种方式使用bubbling只执行最顶层元素的绑定函数，但我不知道代码是什么样的，这真的是我可以在哪里使用帮助。

我正在使用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

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

2 个答案: