Apache Cordova: iOS click event not working – Quick solution

When you are using Apache Cordova to create apps, you will most likely use click  events to navigate from one view to another or to do other stuff. This all works fine on Android devices, but iOS is not doing anything – and you won’t get an error in the debug console, either. The problem is that iOS is not sending a click  event, but touchstart . So your event listener should look somewhat like the following.

$('button').on('click touchstart', function(){
    // Click event - even working with iOS
});

This will let you register your event listener for both the click event  and the touchstart event .

Downside of touchstart/touchend

The downside is: When the user accidentally touches an element with an registered event listener, it fires immediately. That would be bad for example when you have a list of elements which needs to be srolled. When the user scrolls the view and hits one of the elements, the event fires.

But: There is a very simple solution to this!

You can use the click event – you just need to add one CSS rule to the element on which the click event should work.

So for example, you have a div with the class „testclick“.

<div class="testclick">
    <h1>TEST CLICK</h1>
</div>

You register a click handler like following (with jQuery)

$(document).on('click', '.testclick', function() {
    alert("Clicked")
})

This won’t work, because the event will not be fired on iOS. FU Apple. 

But, here is the fix: Simply, add a rule for this element in your CSS file.

.testclick {
    cursor:pointer;
}

Now you’re all set. The click event is firing, and you will be able to use the standard click event throughout your app.