How to Enable Rapid Clicking on Buttons?


#1

How do I enable rapid clicking on a button, or other elements, without preventGhostClick firing off every time, rendering the clicks useless? Sorry I’m very new to the whole AngularJS/Ionic business.


#2

You can maybe use fastclick instead of the default ngTouch directive. Many people find this better in terms of performances.

include the fastclick lib and then in your code:
FastClick.attach(document.body);

if you’re doing it inside the controller code, you can inject $document inside your controller function.


#3

Thanks for the help. I did that, included the lib and at the start of app.js
app.run(function(){FastClick.attach(document.body);});

But I’m not noticing any difference. I’m concerned not with the first click, but all the subsequent clicks are still firing off preventGhostClick and not registering at all.

Is it because I need to replace ng-click with something else? If so, How do I do that? If I just replace it with onClick it says the function is not defined.


#4

I don’t know about the preventGhostClick part, but normally you don’t need to replace ng-click when you use fastclick, although you need to remove all references to ngTouch.


#5

ngTouch is not referenced anywhere. And to tell the truth, I don’t know if that has anything to do with it either. Here are the buttons I’m trying to mash.

<button class="button button-small icon ion-minus" ng-click='dec()'></button>
  <label class="item-input-wrapper">
    <input type="number" ng-model="tally" style="text-align: center;">
  </label>
<button class="button button-small icon ion-plus" ng-click='inc()'></button>

To clarify my problem, the number increments or decrements just fine on first click, but not on subsequent clicks if you’re clicking rapidly. If you click with some delay in between though, there is no problem.

And here’s a plunker to demonstrate http://plnkr.co/edit/bpUCvG5WMuXf856VpRTa?p=preview