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

hi Lars,i have updated the above query with my code ,on how i m using your example.i think i am making using it in wrong way,so it does not work.could you please suggest on how to use it — javalearner, Jan 10 '14 at 07:17
possible duplicate of [D3: How do I set "click" event and "dbclick" event at the same time?](http://stackoverflow.com/questions/18307185/d3-how-do-i-set-click-event-and-dbclick-event-at-the-same-time) — Ian, Jan 30 '15 at 13:50

score 2 · Accepted Answer · answered Jan 09 '14 at 12:50

2

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

answered Jan 09 '14 at 12:50

FernOfTheAndes

4,975
2
17
25

the above thing is done.problem is when you do double click..first it is going to foo then to bar but i need i should directly go to bar – javalearner Jan 09 '14 at 12:59
1

After a bit of research I ended up [here](https://gist.github.com/couchand/6394506). I applied the function to a quick example and it works...but there's got to be an easier way. I also could not open the example by Lars...I think Github is experiencing problems. – FernOfTheAndes Jan 09 '14 at 13:47
1

Here the modified version with correct data bundling http://bl.ocks.org/kashesandr/0c9fee5edc8d78a32a10e7040822cd30 – kashesandr Jul 28 '16 at 12:43
`d3.rebind` has been removed in v4, so the above example won't work. Anyone got a working example for v4? – aalimovs Aug 12 '17 at 20:24

aknuds1 · Answer 2 · 2017-01-13T12:48:31.700

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)

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

2 Answers2

d3Utils.js

index.js