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

Question

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

但是，我一直遇到与事件冒泡相关的问题，并且让我自己彻底糊涂了。 与其引导您走这条路，不如解释一下我正在尝试做的事情并寻求一些入门帮助。 以下是一些规格：

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

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

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

Answer 1

您可以向 document.body 添加事件侦听器。 处理程序函数可以检查事件以确定最初针对的是哪个元素。 如果你使用的是 Prototype 库，你会使用这个：

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 的“highlight”插件，您可以将其作为指南，了解如何使用具有某些给定类的<span>标签替换简单文本节点。 该插件旨在让您为您搜索的单词/短语设置样式，但它并不是非常复杂，您可以对其进行调整。 插件在这里： http : //johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

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

问题描述

2 个解决方案

解决方案1
0 2010-03-07 23:05:03

解决方案2
0 2010-03-07 23:09:00

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

问题描述

2 个解决方案

解决方案1 0 2010-03-07 23:05:03

解决方案2 0 2010-03-07 23:09:00

解决方案1
0 2010-03-07 23:05:03

解决方案2
0 2010-03-07 23:09:00