Double click/tap with Draggable

[Dipscom]

Mighty Powers That Be!

 

Forgive this lowly being for begging but this one has no strength on its own.

 

This one knows that there is no double click/tap in Draggable events but one must pray to be illuminated with the way on how to accomplish such task inside the onClick event.

 

Should one set a variable to check if a second click happens within a second from the first one? If so, should one use setInterval? If not, how should one proceed?

 

*Bow*, *bow*, *bow*!

 

[OSUblake]

One should use the dblclick event on the element itself.

[Dipscom]

But... But... But...

 

This one has tried it. It receives the onClick twice from the Draggable and the double click from the element itself.

 

Had this low life been any better it would have made a pen to prove its point. But alas, making a reduced case example from a mobile is still too hard while in transit.

 

 

[OSUblake]

I would say that listening for clicks and double clicks seems odd. What are you trying to do?

[Dipscom]

I'm pushing GSAP to the limit. 

 

 

On the serious note: I'm trying to implement a zoom in/out on double click and a raycaster check on click on top of a Draggable element.

[Dipscom]

Here we go, we now have a Pen!

 

See the Pen BZvEWp?editors=0011 by dipscom (@dipscom) on CodePen

 

[GreenSock]

How about something like this?: 

See the Pen jwXovj?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[Dipscom]

Yes m'lord!

 

Once again, I can see I thought the logic correctly but did not manage to translate it into code.

 

Thank you very much.

[GreenSock]

Anytime! There are probably a bunch of ways to do this. I'll consider adding a timeSinceClick() method to Draggable - do you think that'd be useful? 

[Dipscom]

Weeellll.. It would be handy on my particular case. I am not sure how many other people might make use of it.

 

If I were to choose between a double-click event and a timeSinceClick(), i'd choose the double-click event. It's a lot easier (to my eyes) to check the time after a click than it is to emulate the double click.

[Dipscom]

@GreenSock can I check with you, the `deferSingleClick` variable is not being used, right? It's just leftover from another attempt. 

[GreenSock]

16 minutes ago, Dipscom said:

@GreenSock can I check with you, the `deferSingleClick` variable is not being used, right? It's just leftover from another attempt. 

 

Sorry, I coded it intending to leverage that...and forgot. But I just updated it now so it's wired up

[Dipscom]

I see, look at you, above and beyond.

 

You're the man, Mr. Sock!

[GreenSock]

Your wish is my command: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

onDoubleClick

 

Better? 

[Dipscom]

It will be gorgeous but it looks like it needs some polishing.

 

See the Pen BZMWYW by dipscom (@dipscom) on CodePen

 

[GreenSock]

What exactly did you think needs polishing? If you're referring to the calling of that method twice in your example, that's because you set up an onDoubleClick and you also had document.querySelector('div').addEventListener('dblclick', doubleClickin);

 

Am I missing something? 

[Dipscom]

Ah bugger I did miss that. But, it was not just that, it was also the fact that I was seeing the onClick fire twice alongside the double click.

 

I did remove the event listener from my previous pen but can't check what's changed because I am on mobile.

 

 

[GreenSock]

Yep, I think the onClick should indeed fire every time you click on the element. It shouldn't ignore certain clicks. See what I mean? Imagine the confusion that could cause if someone listens for onClick...but those don't fire in some cases (like if it's during a double-click). That behavior would also force us to implement that dreaded 300ms-delay on the initial onClick that iOS got a bad rap for years ago. Like, the first click might be a regular click...or it might be the first part of a double-click - we can't tell unless we wait for either 300ms to elapse or for that 2nd click within that time. See the problem? 

 

So my compromise was to just add an onDoubleClick even that'll fire if there are 2 clicks within 300ms of each other, but not alter the dispatching of the other events (like onClick). I also added the timeSinceClick() method so you can implement logic however you prefer, like in the onClick instead. 

 

Make sense? Do you have a different behavior in mind that you think would make more sense? 

[Dipscom]

I do hear you and can understand the argument. What I don't know is how the whole single/double click is handled outside of the browser. Because, when using natively, you can have a single click trigger something and a double click trigger something else. Which is what I am after here (Mind you, the first code you presented works perfectly and will be used, thanks).

 

Bottom line this is your decision and as you have said, you have a decent compromise. One can always add the check him/herself with the timeSinceclick().

 

It's great to have the convenience methods and that things are added/fixed/patched as promptly as they do. 

 

Maybe one day, when I grow up, I'll know enough to offer alternatives. For now. I shall scurry back into the shadows while you shine bright knowledge and common sense onto us mortals.

 

;D