Add CSS change on touch start for mobile devices

Question

I'm attempting to change the CSS of a link before the app navigates to another page. I've previously added an ontouchstart event to the link element to greatly speed up navigation in the app. The problem is that the event fires and app navigates before the CSS can change.

What are some ways I could provide user feedback before the page changes?

Additional notes:

• This is a SPA constructed using AngularJS and PhoneGap Build.
• I discovered that using button:active will only fire after the button is clicked so the page would navigate before the CSS changes.
• I believe this will need to be tested on a touch-screen device to see the effect.
• This is my first question on here so please be gentle :)

Here is some example code:

HTML

<a class="button" ontouchstart="goTo('#!/stats', 'buttonActive', this);" onclick="goTo('#!/stats', 'buttonActive', this);">STATS</a>

CSS

.button {
    display: flex;
    background-color: #000000; 
    color: dodgerblue;
    font-size: 4vmin;
    cursor: pointer;
    text-decoration: none;
    font-size: 7vmin;
    border: 0.75vmin solid dodgerblue;
    border-radius: 1vmin;
    height: 8vh;
    width: 40vmin;
    padding: 2vmin;
    margin: 5vmin auto;
    align-items: center;
    justify-content: center;
}
.buttonActive {
    background-color: dodgerblue;
    color: white;
}

JS

function goTo (location, addClass, elem) {
    elem.className += addClass;
    window.location.href = location;
}

Answer 1

I ended up using ontouchend instead of ontouchstart. This allowed for the CSS to change while the user's finger is pushed down and the page will not navigate until the user releases his/her finger.