javascript - D3.js如何防止点击事件上的拖动启动

Question

我正在使用D3.js v4 库。我需要区分单击事件和拖动开始事件:如果它是单击事件，我不希望触发拖动开始。似乎也有可能相反(如果 Dragstart 被触发，则防止单击)。知道这是否可行吗？

var svg = d3.select("#svgContainer").append("svg")
  .attr("width", 100)
  .attr("height", 100);
  
var onDrag = d3.drag()
  .on("start", function() {
    $("#console").append('<p>drag-start</p>');  
    console.log("drag-start");
  })
  .on("drag", function() {
  
  })
  .on("end", function() {
  
  });
  
var box = svg.append("rect")
  .attr("x", 25)
  .attr("y", 25)
  .attr("width", 50)
  .attr("height", 50)
  .attr("fill", "orange")
  .on("click", function() {
    $("#console").append('<p>click</p>');
    console.log("click");
  })
  .call(onDrag);
  
  
$("#btn").click(function() {
  $("#console").empty();
});
  
  

p {
  line-height: 8px;
  font-size: 8px;
}

#svgContainer {
  display:block;
  width: 100px;
  height: 100px;
  background-color:  #333;
}

#console {
  display: block;
  width: 100%;
  height: 400px;
  overflow: scroll;
}

#btn {
  position: absolute;
  top: 70px;
  left: 150px;
  width: 50px;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.js"></script>


<div id="svgContainer"></div>
<div id="console"></div>
<button id="btn">Clear</button>

Answer 1

只是在这里吐痰，但我可能会做这样的事情:

var dragger = null;
var onDrag = d3.drag()
    .on("start", function() {
        dragger = setTimeout(function() {
            $("#console").append('<p>drag-start</p>');  
            console.log("drag-start");
        }, 100);
    });
var box = svg.append("rect")
    .attr("x", 25)
    .attr("y", 25)
    .attr("width", 50)
    .attr("height", 50)
    .attr("fill", "orange")
    .on("click", function() {
         $("#console").append('<p>click</p>');
         console.log("click");
         clearTimeout(dragger);
     })
    .call(onDrag);

因此，您的拖动开始将延迟 100 毫秒(或您想要的任何时间)，如果单击发生在该延迟之前，则会取消超时。