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

发布于 2024-08-24 23:08:42 字数 672 浏览 8 评论 0原文

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

然而，我遇到了与事件冒泡相关的问题，并且彻底迷惑了自己。与其引导您沿着这条路走下去，不如解释一下我正在尝试做什么并寻求一些入门帮助，这可能更有意义。以下是一些规格：

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

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

) 元素上也不会执行处理程序函数例如，在上。我认为正确的方法是将事件处理程序绑定到文档元素，然后以某种方式使用冒泡仅在最顶层元素上执行绑定函数，但我不知道该代码是什么样的，这确实是我可以在哪里需要帮助。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

童话里做英雄 2024-08-31 23:08:42

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

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

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

回复收藏 0 原文

痴骨ら 2024-08-31 23:08:42

这将是一个相当大的问题，因为您无法直接设置文档中文本节点的样式。这意味着，如果您有这样的内容：

<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>

那么，当您尝试重新设置

头部的文本块的样式时，您需要以这样的方式进行操作：

的其余部分也不会获得新的背景颜色。（至少，我认为这就是您所要求的。）

有一个 jQuery 的“突出显示”插件，您可以将其视为如何使用具有某些给定类别的标签。该插件旨在让您设计您搜索的单词/短语的样式，但它并不是非常复杂，您也许能够适应它。该插件在这里： http://johannburkard .de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

This is going to be fairly problematic, because you can't directly style the text nodes in your document. That means that if you've got something like this:

<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>

Well when you try to restyle the text block at the head of that <div>, you'll need to do it in such a way that the rest of the <div> doesn't also get a new background color. (At least, I think that's what you're asking for.)

There's a "highlight" plugin for jQuery that you might look at as a guide to how you can replace simple text nodes with <span> tags that have some given class. The plugin is intended to let you style words/phrases that you search for, but it's not terribly complicated and you might be able to adapt it. The plugin is here: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

回复收藏 0 原文

~没有更多了~