通过使用不同的选择器选择一个元素并给它添加多个事件处理程序

Question

我有几个“事件”类，涵盖了我的一些SVG元素。我为每个类分配了一个mouseover和mouseout事件处理程序，如果一个元素有多个类，我希望两个处理程序都能触发。我该怎么做？当我这样做时，似乎会出现问题：

d3.selectAll(".a-class")
    .on("mouseover", function() {
        // do A
    })
    .etc();

d3.selectAll(".another-class")
    .on("mouseover", function() {
        // do B
    })
    .etc();

当我悬停在一个同时拥有两个类的元素上时，只有第二个事件处理程序B被触发了，这似乎是因为它覆盖了第一个事件处理程序。是否有一种方法可以“追加”事件处理程序而不是重新定义它呢？

- Bluefire

Answer 1

根据文档，如果已经为选定元素注册了相同类型的事件侦听器，则在添加新侦听器之前会删除现有侦听器。要为同一事件类型注册多个侦听器，可以在类型后面跟随可选的命名空间，例如“click.foo”和“click.bar”。

因此，您可以通过将任意命名空间附加到每个处理程序来实现所需的内容。

d3.selectAll(".a-class")
    .on("mouseover.a", function() {
        // do A
    })
    .etc();

d3.selectAll(".another-class")
    .on("mouseover.b", function() {
        // do B
    })
    .etc();

这样做的额外优点是您随后可以明确地引用添加的事件处理程序（单独或整个命名空间），以替换或删除它们。

- Steve Greatrex

---

我猜测你的代码中，处理程序 A 会首先触发，我的猜测正确吗？ - Bluefire

我相信是这样，但我不确定它是否一定保证。 - Steve Greatrex