Is there a way to get the click count from the click argument $event?
Trying to have a double/triple click for some specialized activation flows.
In javascript I found this, but was trying to stay inside the Aurelia framework and binding if possible.
Thanks!
Okay, so I am blind in one eye and can’t see out of the other.
I see the detail property on the event (doh), but its always 1 no matter how many clicks and how fast I click.
That prop on event is not for for how many times you clicked, but which button you clicked.
There is native dblclick event support in browser which you can hook to, but there is no native triple click support.
To support all 3 together, I mean you don’t want to issue click handler twice when dealing with double click, right? It is trickier, because now you need to wait after 1st click. Is user trying just click, or is there more clicks coming for double or triple click? This scenario is called gesture recognition. You can bring a library to support this. http://hammerjs.github.io
Thank you for taking the time to reply.
FYI, this will only use a triple click, and not double or single. Its for triggering a support reset of local data.
The linked jsfiddle actually works for a triple click, and it uses the details property to determine that using plain JavaScript so I am confused with your answer. I know that you have way more experience with this then I do, and understand I could be missing the obvious.
Is the button clicked something Aurelia does to replace that value?
Why would it not show the ‘quick click/tap count’ like the example if it doesn’t?
thanks
Sorry, I did not read your fiddle. Obviously I am not that experienced on this topic, I did not know about click event’s event.detail property. Thanks for bring it up!
Here is how you handle triple click.
In your click.trigger or click.delegate binding, you need to pass context variable $event (this is how aurelia pass the event object back to you) to the calling method, then you can check event.detail in your method.
Cheers!
<div click.trigger="toggleBackground($event)">...</div>
toggleBackground(event) {
if (event.detail !== 3) return;
// triple click!
this.dark = !this.dark;
}
Hi,
So I have that, and detail is always 1 using the $event parameter. That was why I was trying to figure out why it works with the
document.querySelector('div').addEventListener('click', function (evt)
but not
<span onclick="" click.delegate="dbResetTripleClick($event)">Alpha Release ${version}</span>
dbResetTripleClick(event)
Here is the full function, and it is being called with a populated event param:
dbResetTripleClick(event)
{
console.log('version clicked!');
console.log(event);
if (!this.confirmThrottle && event.detail === 3)
{
console.log('Triple-clicked!');
this.confirmThrottle = true;
setTimeout(function ()
{
this.confirmThrottle = false;
}, 1000);
this.confirmDialog.open();
}
}
I don’t know enough about the guts of Aurelia Trigger/Delegate event link-up to know if it might be creating its own event object and not copying all the native properties? That’s a wild guess, but since it works with the native querySelector on the surface seems to be what is happening.
I am bit confused. First, did my gistrun triple click works on your browser?
Update: I also tested both click.trigger and click.delegate, both work on my machine.
Sorry, yes the gist seems to work.
I put my code into it as well, and the code works. (there was a bug in the timeout function call that I had to change to a lamda to capture ‘this’)
So that leads back to something on my project setup causing the issue.
‘detail’ is always returning 1 there so now I get to chase that down.
Thank you for the GIST showing its not Aurelia or directly my code causing the issue.
Wonder if bootstrap might cause that…
Not bootstrap, jus tested with bootstrap v4.
I can only guess you might have something (maybe a dirty check observer) redrawing the <span> over and over again. So every one of your clicks landed on a different (reborn) <span>.
I only had one ${version} in the span, so just to test I removed it. And no change on the detail count.
I stripped the page of everything but the h3 element and still the same.
I am incredible at tripping myself up I guess…
Just created a plain vanilla page and viewmodel and same thing.
I hate trying to update stuff when in the middle of work, but I might have to try that next I guess.
Just some more information that might help someone else…apparently support is very inconsistent.
So, I rolled up a new project after updating npm to the latest version and then doing an npm update.
This is just the skeleton app with the only code being the click handler.
export class App {
message = '';
testClick(event)
{
this.message = event.detail;
console.log(event);
}
}
<template>
<h1>Event.Detail = ${message}</h1>
<div onclick click.delegate="testClick($event)">Test Click</div>
</template>
Same issue where detail in $event object is only 1, now this has been done in Chrome.
I dragged out Edge and it worked…back to Chrome, and it doesn’t.
Now remember that Chrome worked in the GIST supplied, as well as the JSFiddle.
I verified running the latest Chrome installed and it indicated it was.
I run Dev in a VM, so went ahead and closed everything down and shutdown and restarted the VM.
No change, Chrome still failing.
So something wrong with my local machine and installation?
Copied files over the test project to my external test server, and browsed using other computers, browsers.
fails means always 1
Description
Test project / GIST
Win10 Desktop Edge works - counts all rapid mouse clicks
works, works
Win10 Desktop Chrome
fails, works
iPhone 6 Safari
fails, fails
iPhone 6 Chrome
fails, fails due to service worker
iPad mini 4 Safari
fails, fails
iPad mini 4 Chrome
fails, fails
Win10 Surface Chrome [taps loop 1 -3, mouse will continue to count up]
works, works
Win10 Surface Edge [Taps will continue to count up, mouse will continue to count up]
works, works
Samsung S5 Chrome [taps loop 1-3]
works, works
Here is a modified GIST to work around the inconsistent browser behavior that was showing up.
Thank you @huochunpeng for getting me on the right track of debugging this with that GIST.
So weird… My Chrome didn’t fail. I don’t know what’s happening.
I know, strange isn’t it?
Once I moved to other computers and saw the same issue or it work, it negated anything directly I might have caused! 