SVG 用 D3 标记 mousedown 事件

Question

我有一个<svg></svg>节点，我尝试添加mousedown事件，由于某种原因根本不会触发，而click工作正常，这是有意的行为吗？ svg 标签不能附加mousedown事件还是我做错了什么？

我正在使用 d3.js 库附加事件：

 d3.select(svg)
    .on("mousedown", (event) => setRectPoint(event, gContainer))
    .on("mousemove", (event) => drawRectOutline(event, gContainer));

Answer 1

如果svg已经是一个选择，则不需要再次执行d3.select 。

下面你可以看到当鼠标按钮被按下时mousedown被触发，而当按钮被释放时click被触发。

 const svg = d3.select("#viz").append("svg").attr("width", 240).attr("height", 180); const drawRect = (e) => { d3.select(e.target).append("rect").attr("x", ex).attr("y", ey).attr("width", 40).attr("height", 20); } const drawCircle = (e) => { d3.select(e.target).append("circle").attr("cx", ex).attr("cy", ey).attr("r", 20); } svg.on("mousedown", e => drawRect(e)).on("click", e => drawCircle(e));

 svg { border: 1px solid black; } rect { fill: #f00; } circle { fill: #0f0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script> <div id="viz"></div>