how to distinguish between single mouse click and double click on same node element in d3 js

Question

Need to make two different operations one for single click and other for double click.single click is working but for double click it is going to single click function then goees to double click function.how to stop single click function firing when double click happens or how to capture the event type single or double..please help!!!

according to the example ,i am using as shown below..it is the right way?

                     var nodeEnter = node.enter()
                    .append("g")
                    .attr("class","node")
                    .attr("transform", function(d) {
                        return "translate(" + source.x0 + "," + (-(source.y0)) + ")";
                    }).on('click', click);






                                 function click{
                                  var cc = clickcancel();
                                cc.on('click', function() {

                           addDetailsDiv(d.id, d.name, d.type);
                }); 

                      cc.on('dblclick', function() {
                    dblclick();
                });

Answer 1

I was having the same problem, and I found a solution that works at least with v3 of the API. The gist of the solution is to trap mouse up/mouse down, and issue a dblclick event if a second mouse click arrives before a certain time (300 ms in this case), otherwise a click event will be issued:

d3Utils.js

const d3 = require('d3')

module.exports = {
  // Get a function that dispatches 'click' and 'dblclick' events for a D3 selection
  getClickDispatcher: () => {
    const clickEvent = d3.dispatch('click', 'dblclick')

    return d3.rebind((selection) => {
      let waitForDouble = null

      // Register click handler on selection, that issues click and dblclick as appropriate
      selection.on('click', (projectProxy) => {
        d3.event.preventDefault()
        if (waitForDouble != null) {
          clearTimeout(waitForDouble)
          waitForDouble = null
          clickEvent.dblclick(d3.event, projectProxy)
        } else {
          const currentEvent = d3.event
          waitForDouble = setTimeout(() => {
            clickEvent.click(currentEvent, projectProxy)
            waitForDouble = null
          }, 300)
        }
      }
    })
  }, clickEvent, 'on')
},

}

index.js

const {getClickDispatcher,} = require('./d3Utils')

const clickDispatcher = getClickDispatcher()
  .on('click', () => {
    console.log('A single click was detected')
  })
  .on('dblclick', () => {
    console.log('A double click was detected')
  })

// Hook up clickDispatcher
d3.select('.node')
  .call(clickDispatcher)

Answer 2

someSelection
    ...
    .on("click", foo)
    .on("dblclick", bar)