javascript - 将键盘事件监听器添加到 svg div 容器

Question

我正在尝试将键盘甚至监听器(keyup、keydown)添加到 <div>包含 <svg>元素。 This post notes that SVGs do not currently support handling keyboard events ，所以我尝试将事件添加到 <div>周边<svg> 。但它似乎也不起作用。 ( fiddle ) 也不会向 SVG 中包含的所有元素添加事件处理程序。

这可以做到吗？我做错了什么吗？

(我不想将事件处理程序分配给 body 或 window，因为我在页面的不同部分有一个文本输入表单。)

Answer 1

您可以将键盘事件附加到 svg 元素。但是随着键盘按下，您必须附加焦点事件而不附加焦点，这是行不通的。

var chart = d3.select("#chart")
    .style("fill", "red")
    .style("height", '600px')

var svg = chart.append("svg")
    .attr("width", 500)
    .attr("height", 300);

var currentObject = null;

svg.append("circle")
    .attr("class","selectme").attr("id","circle")
    .attr("cx",50).attr("cy",50).attr("r",45)
    .style("fill","lightblue");
svg.append("rect")
    .attr("class","selectme").attr("id","rectangle")
    .attr({"x":10,"y":150,"width":150,"height":100})
    .style("fill","lightgreen");
d3.selectAll(".selectme")
    .on("mouseover", function() {
        d3.select(this).style("stroke","black");
        currentObject = this;
    })
    .on("mouseout", function() {
        d3.select(this).style("stroke","none");
        currentObject = null;
    });

d3.select("svg")
    .on("keydown", function() {
        svg.append("text")
            .attr("x","5")
            .attr("y","130")
            .style("font-size","20px")
        .text("keyCode: " + d3.event.keyCode + " applied to : " + (currentObject===null ? "nothing!" : currentObject.id))  
          .transition().duration(2000)
            .style("font-size","5px")
            .style("fill-opacity",".1")
          .remove();
    }).on("focus", function(){});