d3：拦截特定元素的keydown事件

Question

我想识别在特定 D3 元素上发生的按键事件。以下 sn-p（此处为JSFiddle）正确识别鼠标悬停在单个 div 上和全局按键事件，但似乎没有触发特定于 div 的按键处理程序（目前仅在 Chrome 上测试）。最简单的方法是什么：

1. 确定光标在哪个div/svg上，或者
2. 将密钥处理程序附加到特定的div/svg

?

_.each(_.range(2), function (i) {
    var svg = d3.select("#plot" + i).append("svg")
        .attr("width", 100)
        .attr("height", 100);

    svg.append("rect")
        .attr("fill", "red")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 100)
        .attr("height", 100)
        .on("mouseover", function () { console.log("mouseover", i); })
        .on("keydown", function () { console.log("div key", i); });
});

d3.select("body").on("keydown", function () { console.log("global key"); });

谢谢！

编辑

作为后续，我想我可以在 mouseover 处理程序中捕获 div ID 并使用它来识别全局 keydown 事件中的适当 div - 但我很好奇是否有更优雅或惯用的解决方案。

Answer 1

*哦。您的编辑正是这个解决方案。是的，这可能是最好的处理方式。 *

您可能需要使用 mouseover 处理程序来跟踪当前聚焦的元素，然后使用页面侦听器将事件委托给该节点。

类似这样的：

var focused = null;
svg.append("rect").on("mouseover", function () { focused = this; })

然后在您的页面处理程序中：

d3.select("body").on("keydown", function () { d3.select(focused); /* then do something with it here */ });

Answer 2

您还可以使用 d3.event.stopPropagation() 来防止事件冒泡到正文。