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

Question

我正在进行一个与Firebug的检查工具的功能相类似的项目。也就是说，当我浏览页面上的元素时，我想高亮显示它们(通过改变它们的背景色)，当它们被点击时，我想要执行一个函数，它构建一个CSS选择器，可以用来识别它们。

然而，我遇到了与事件冒泡相关的问题，并彻底地混淆了自己。与其沿着这条路走下去，不如解释一下我想要做的事情，并向你寻求一些帮助。以下是一些规格：

我只对包含文本节点(或任何带有文本节点的子代元素)的元素感兴趣。当鼠标进入这样一个元素时，更改其背景色。当鼠标离开该元素时，将其背景色更改为originally.

• When，单击元素，执行为该元素构建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