1

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

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

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

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

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

4

2 回答 2

0

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

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

我知道您使用的是 jQuery，但我确信它具有相同的功能；我只是不太熟悉它。

于 2010-03-07T23:05:03.660 回答
0

这将是相当有问题的，因为您不能直接设置文档中的文本节点的样式。这意味着如果你有这样的东西：

<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

于 2010-03-07T23:09:00.547 回答