Double click event

[Charles9292]

Hi~
Double click event how to add?
I tried several methods, but failed.
dome

[asturur]

http://fabricjs.com/docs/fabric.Object.html

Check the event names, double click is included.

[Charles9292]

canvas.on('mouse:dblclick', cb)
canvas.on('event:mousedblclick', cb)

That's right？
But it doesn't work at all

[asturur]

i use them. what does not work?

[Charles9292]

I bind double click events in two ways，Double clicking on the element does not make any response

[asturur]

can you open a simple fiddle with a rect on the canvas?

[Charles9292]

https://jsfiddle.net/Charles_/adrd8npa/1/

[Charles9292]

I used the down event to simulate the double click event
But not the best - -!

let time = 0
let sl = _ => {
  if (time === 0) {
    return time = new Date().getTime()
  }
  if (new Date().getTime() - time < 700) {
    alert('dblclick!')
  }
  time = 0
}
canvas.on('mouse:down', sl)

[asturur]

Double click support is just on the new 2.0 beta.
If you want to use it before, you need to inspect the iText class and take the double/triple click simulator from there. Is based on mouse down like your.

Alternatively check the PR that enabled dblclick on 2.0 and backport to 1.7.x
#3998

[albert-hoffman]

@asturur Building an ios App and using fabric canvas in it. Need to use the double tap event on canvas but 'mouse:dblclick' event is not firing on iOS devices. can you tell me how does it work in iPad safari?

this.canvas = new fabric.Canvas('can').set({
    backgroundColor: '#ffffff',
    selection: false,
    perPixelTargetFind: true,
    targetFindTolerance: 70,
    background: 'white',
    enableRetinaScaling: false
});
this.canvas.on('mouse:dblclick', (e1) => {
    console.log('double clicked', e1);
}

[asturur]

Yes double click and double tap are 2 different things.
I'm using happily enough hammerJS in a production application and i think we should make a demo with something like that.

Are you using any high level event library?

[albert-hoffman]

@asturur I am using fabricJS with angular 7. I just want to double tab. if you find any demo for a mobile device it will be helpful for me. but thing is that I have already implemented the huge application in fabrics, so I can not abandon fabrics. I have to work out with it. thanks dear

[asturur]

Yes but wanting to just double tap, please remember that double tap is not a touch event or a js event. the phones get it and translate in something that is not a double click eventually.
So you need a sort of event manager that will fire the double tap for you.

[Saqib92]

any update on this? I want double tap(for touch screen) and double click on desktop. its working fine on double click on desktop but not working in touch screens.

[Saqib92]

Yes double click and double tap are 2 different things. I'm using happily enough hammerJS in a production application and i think we should make a demo with something like that.

Are you using any high level event library?

can you please show a little demo with hammerJS to detect double top on object? I am using Angular v15 with fabricjs.

[Saqib92]

Yes double click and double tap are 2 different things. I'm using happily enough hammerJS in a production application and i think we should make a demo with something like that.
Are you using any high level event library?

can you please show a little demo with hammerJS to detect double top on object? I am using Angular v15 with fabricjs.

Done with Hammer JS. on double tap event call canvas.getActivebject().

Used this hammer example.

Hammer JS Double Tap Example