Focus、blur、focusin、focusout，不适用于 D3 和 SVG 元素？有其他选择吗？

Question

我正在使用 d3 库在 SVG 中创建小部件。在 SVG 中，我正在尝试执行以下操作：

有可点击的小矩形。一旦可点击，他们应该“放大”并显示一些输入字段。当我在矩形外单击时，我希望它们“取消放大”并再次删除输入字段。

小矩形：

点击后放大（还没有输入框）：

当我在白色矩形外点击时，我希望它恢复到图 1：

我通过点击事件触发放大：

let whiteRect = node.append("g")
                    .on('click', function(a) {
                         // Trigger enlarge function
                         return a;
                     })};

而且我想使用模糊或聚焦事件触发“点击外部”。但这似乎不适用于 SVG。像这样：

let whiteRect = node.append("g")
                    .on('blur', function(a) {
                         // Trigger "un-enlarge" function
                         return a;
                     })};

我一直在做一些搜索，似乎在 SVG 2 中可能支持这一点，但似乎没有任何浏览器实现这一点。

有人知道我该如何实现吗？我知道我可以为整个 SVG 添加一个 onclick 事件侦听器，并在其中编写一些逻辑来识别我是否正在单击放大的矩形。但如果可能的话，我更喜欢使用更简单的东西，比如模糊或聚焦。有什么想法吗？

Answer 1

发布后不久，我发现了这个关于聚焦 svg 元素的教程：https://allyjs.io/tutorials/focusing-in-svg.html

事实证明，如果您将焦点事件添加到元素，它就会变得可聚焦，并且还会获得模糊事件。所以我所做的是添加一个空的焦点事件以便能够使用模糊。

let whiteRect = node.append("g")
                .on('click', function(a) {
                     // Trigger enlarge function
                     return a;
                 })}
                .on('focus', function(a) {
                     // Empty focus event
                     return a;
                 })}
                .on('blur', function(a) {
                     // Trigger un-enlarge function
                     return a;
                 })};

这对我有用。

Focus、blur、focusin、focusout，不适用于 D3 和 SVG 元素？有其他选择吗？

Focus, blur, focusin, focusout, don't work with D3 and SVG Elements? Is there an alternative?

svg

d3.js

onblur

onfocusout