鼠标弹起事件在 SVG 中无法正常工作

Question

我正在使用 d3js 绘制简单的线，这里我捕获了 mouseup 和 mousedown ，mouseup 没有按预期工作。请检查下面 code.Here 是 fiddle - http://jsfiddle.net/Ltrpbsh1/ ，可以拖动鼠标画画，但是松开鼠标就没有松开

d3.select("#xabcd")
    .append('rect')
    .attr('width', 1000)
    .attr('height', 1000)
    .on("mousedown", mousedown)
    .on("mouseup", mouseup);


var what = d3.select("#xabcd");

function mousedown() {
    console.log("down");
    var m = d3.mouse(this);
    line = vis.append("line")
        .attr("x1", m[0])
        .attr("y1", m[1])
        .attr("x2", m[0])
        .attr("y2", m[1]);

    what.on("mousemove", mousemove);
}

function mousemove() {
    console.log("moving");
    var m = d3.mouse(this);
    line.attr("x2", m[0])
        .attr("y2", m[1]);
}

function mouseup() {
    console.log("up");
    what.on("mousemove", null);
}

Answer 1

问题是事件侦听器在您正在转换的矩形上，而指针可能永远不会在它的正上方。将您的 mouseup 事件侦听器放在 svg canvas 上，这样您释放鼠标的任何一点都会侦听更改。更新演示：http://jsfiddle.net/y6hx81j4/

var vis = d3.select("#chart").append("svg")
    .attr('id', 'xabcd')
    .attr('width', 1000)
    .attr('height', 1000)
    .on("mouseup", mouseup);

希望对您有所帮助！

Answer 2

当 mouseup 发生时，您正在绘制的蓝线就在鼠标下方，这会阻止矩形捕获事件。

解决方案很简单，只需将 pointer-events: none 设置为那一行：

line.attr("pointer-events", "none");

这是您的代码，仅进行了更改：

var line;

var vis = d3.select("#chart").append("svg")
  .attr('id', 'xabcd')
  .attr('width', 1000)
  .attr('height', 1000)



d3.select("#xabcd")
  .append('rect')
  .attr('width', 1000)
  .attr('height', 1000)
  .on("mousedown", mousedown)
  .on("mouseup", mouseup);

d3.select('#xabcd')
  .style('fill', 'none')
  .style('pointer-events', 'all');


var what = d3.select("#xabcd");

function mousedown() {
  console.log("down");
  var m = d3.mouse(this);
  line = vis.append("line")
    .attr("x1", m[0])
    .attr("y1", m[1])
    .attr("x2", m[0])
    .attr("y2", m[1])
    .attr("pointer-events", "none");

  what.on("mousemove", mousemove);
}

function mousemove() {
  console.log("moving");
  var m = d3.mouse(this);
  line.attr("x2", m[0])
    .attr("y2", m[1]);
}

function mouseup() {
  console.log("up");
  what.on("mousemove", null);
}

.as-console-wrapper {
  height: 20%;
}

svg {
  border: 1px solid grey;
}

line {
  stroke: steelblue;
  stroke-width: 2px;
  stroke-linecap: round;
}

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

鼠标弹起事件在 SVG 中无法正常工作

Mouse up event not working properly in SVG

javascript

html

d3.js

svg

mouseevent