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

Question

I am using D3.js v4 library. I need to discriminate between click and drag-start event: if it is a click event, I don't want the drag-start to be fired. It seems it is possible the other way around (prevent click if dragstart is fired). Any idea if this is doable?

 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

Just spitballing here, but I would probably do something like:

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);

So, your drag start will be delayed by 100ms (or whatever you want), and if the click happens before that delay, it cancels the timeout.