Событие мыши вверх не работает должным образом в SVG - PullRequest
Новая
       18

Событие мыши вверх не работает должным образом в SVG

1 голос
/ 02 октября 2019

Я использую d3js для рисования простой линии, здесь я фиксирую mouseup и mousedown, mouseup работает не так, как ожидалось. Пожалуйста, проверьте код ниже. Вот скрипка - 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);
}

Ответы [ 2 ]

2 голосов
/ 03 октября 2019

Когда 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>
0 голосов
/ 02 октября 2019

Проблема в том, что прослушиватель событий находится в прямоугольнике, который вы преобразовываете, и указатель, вероятно, никогда не находится прямо над ним. Поместите прослушиватель событий mouseup на холст svg, чтобы в любой момент, когда вы отпустите кнопку мыши, изменения прослушивались. Обновленная демоверсия: http://jsfiddle.net/y6hx81j4/

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

Надеюсь, это поможет!

...