WkWebView Cordova Ios onClick events not firing

Question

I've been chasing my own tail for hours. I've read same issue here and here

My Cordova app is basically unresponsive to click events using the ios iphone simulator on my mac. It's also unresponsive in an iphone. Works fine in the browser when doing cordova run browser. I need to mention, yes, everything is inside deviceready so that is not the issue. The only things that are working are href. Everything else is unresponsive. What is the solution?

html

<button id="pressOn">press me</button>

I tried :

This

$("#pressOn").on("touchend", openPage('login'));

This

$("#pressOn").on("touchstart", openPage('login'));

This

let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
$('#pressOn').on(touchEvent, openPage('login'));

None works... Nothing happens.

However somehow this fires when the app appears on the simulator (without me doing/touching anything)

document.getElementById('pressOn').addEventListener('touchstart', alert('cheer up!'), false);

Answer 1

This is not how event listeners work. Actually, you need a function as the second parameter, not a function call:

$(selector).on( eventname , functionDef )

In your case you can do it this way:

$("#pressOn").on("touchend", function () { openPage('login') });

$("#pressOn").on("touchstart", function () { openPage('login') });

let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
$('#pressOn').on(touchEvent, function () { openPage('login') });

If you use a function call like openPage('login') this will be parsed and executed instantly and not in the event flow. For this same reason your call is firing the alert immediately:

document.getElementById('pressOn').addEventListener('touchstart', alert('cheer up!'), false);

You need to use a function closure to define the event listener, like this:

document.getElementById('pressOn').addEventListener('touchstart', function() { alert('cheer up!') }, false);