SVG 标签 mousedown 事件与 D3
SVG tag mousedown event with D3
我有一个 <svg></svg>
节点,我试图添加 mousedown
事件,由于某种原因根本没有被触发,而 click
工作正常,这是这种行为吗intended 和 svg 标签不能附加 mousedown
事件或者我做错了什么?
我正在使用 d3.js 库附加事件:
d3.select(svg)
.on("mousedown", (event) => setRectPoint(event, gContainer))
.on("mousemove", (event) => drawRectOutline(event, gContainer));
如果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", e.x)
.attr("y", e.y)
.attr("width", 40)
.attr("height", 20);
}
const drawCircle = (e) => {
d3.select(e.target)
.append("circle")
.attr("cx", e.x)
.attr("cy", e.y)
.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>
我有一个 <svg></svg>
节点,我试图添加 mousedown
事件,由于某种原因根本没有被触发,而 click
工作正常,这是这种行为吗intended 和 svg 标签不能附加 mousedown
事件或者我做错了什么?
我正在使用 d3.js 库附加事件:
d3.select(svg)
.on("mousedown", (event) => setRectPoint(event, gContainer))
.on("mousemove", (event) => drawRectOutline(event, gContainer));
如果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", e.x)
.attr("y", e.y)
.attr("width", 40)
.attr("height", 20);
}
const drawCircle = (e) => {
d3.select(e.target)
.append("circle")
.attr("cx", e.x)
.attr("cy", e.y)
.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>