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>