Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dipscom

Double click/tap with Draggable

Recommended Posts

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*!

 

  • Like 1
Link to comment
Share on other sites

One should use the dblclick event on the element itself.

Link to comment
Share on other sites

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.

 

:(

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

I see, look at you, above and beyond.

 

You're the man, Mr. Sock! ;)

Link to comment
Share on other sites

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

 

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

 

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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.

 

:)

 

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×