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（第二个处理程序）触发，显然是因为它覆盖了第一个。是否有一种“附加”事件处理程序的方法，而不是重新定义它？

Answer 1

根据documentation ...

如果事件侦听器已在所选元素上注册了相同类型，则在添加新侦听器之前将删除现有侦听器。要为同一事件类型注册多个侦听器，该类型后面可以跟一个可选的命名空间，例如“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();

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

通过使用不同的选择器选择元素，为元素提供多个事件处理程序

1 个答案: