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

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

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

  • 我只对包含文本节点的元素(或带有文本节点的任何后代元素)感兴趣。
  • 当鼠标进入这样的元素时,请更改其背景颜色。
  • 当鼠标离开该元素时,将其背景颜色更改回原来的颜色。
  • 单击元素时,执行为该元素构建CSS选择器的函数。
  • 我不希望鼠标hover在元素的边缘区域上作为该元素的鼠标hover,但是对于下面的元素(我认为这是默认的浏览器行为?)。

我可以处理突出显示/取消突出显示的代码,并构建CSS选择器。 我主要遇到的问题是有效地将事件处理程序绑定到我想要突出显示/可点击的元素,并避免/停止冒泡,以便鼠标hover在(

)元素上也不会执行处理函数例如,。 我认为正确的方法是将事件处理程序绑定到document元素,然后以某种方式使用bubbling只执行最顶层元素的绑定函数,但我不知道代码是什么样的,那真的是我可以在哪里使用帮助。

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

提前感谢任何指导!

您可以向document.body添加事件侦听器。 处理程序函数可以检查事件以确定最初目标的元素。 如果您使用的是Prototype库,则可以使用:

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

我知道你正在使用jQuery,但我确信它具有相同的function; 我只是不熟悉它。

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

Hello world how are you
  • First of all, it is a lovely day outside
  • Second, it's important that you click here

好吧,当你尝试在

的头部重新设置文本块时,你需要这样做,以便

的其余部分也不会获得新的背景颜色。 (至少,我认为这就是你所要求的。)

有一个jQuery的“突出显示”插件,您可以将其视为如何使用具有某个给定类的标记替换简单文本节点的指南。 该插件旨在让您设置您搜索的单词/短语的样式,但它并不是非常复杂,您可能能够对其进行调整。 该插件位于: http : //johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html