Preventing erroneous button clicks from being processed due to "touchend" events on an iPad

I have a button that I've wrapped in a directive, like so: [button type="button" class="btn btn-primary stdbutton{{buttonSize}}" tt-tap="click()" ng-transclude] [/button] (not using '[' of course)

Also, notice the 'my-tap' directive. That is used to get around the 300ms delay caused by an iPad waiting to see if a click is in fact a double click. It detects the "touchend" and "touchmove" events that are raised by a touch screen and handles them appropriately.

The my-tap directive works fine. The situation I have is that when a button is used to navigate between two views, and a similar button exists in the same location on the screen in the other view, the embedded browser is leaving the button in the other view in a selected state after the navigation has happened! I assume it is applying the btn-primary.active CSS class as per bootstrap, or something similar.

Via my custom my-tap directive I am able to prevent the button on the second view from being erroneously 'clicked' because my finger can't lift off the screen before another "touchend" event happens on the second view. That works fine. But how can I get the button on the second view to be left in an unselected state? Should I set a timer or something and then explicitly set the class on the button tag back to appear unselected?

Answers


The best answer to this solution was to utilize fastclick.js, which is a library that integrates perfectly with angularjs and causing angular's ng-click directive to do precisely the right thing on an iPad and eliminates the 300ms delay, thus making my custom directive obsolete.


Need Your Help

Guice CreationException with PersistFilter

java hibernate jpa guice

I have a webapp that uses Guice and JPA/Hibernate. I'm trying to set up an importer to bring in a bunch of data, but I keep getting the following exception:

IDL for JSON REST/RPC interface

json rest rpc protocol-buffers idl

We are designing a fairly complex REST API, in which most of the I/O are JSON encoded objects with a specific structure. One challenge we have found is to document the API in such a way that makes it