[TIMOB-19924] iOS: "onclick" event is not triggered in the WebView if you are listening to multiple "click" events

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2017-04-12T14:57:09.000+0000
Affected Version/s	Release 5.1.0, Release 5.0.2
Fix Version/s	Release 6.1.0
Components	iOS
Labels	qe-5.1.0, qe-6.1.0
Reporter	Wilson Luu
Assignee	Vijay Singh
Created	2015-11-12T02:07:35.000+0000
Updated	2017-06-02T15:42:55.000+0000

Description

*Details:* "onclick" event is not triggered in the WebView if you are listening to multiple "click" events. *Note:* This is *not a regression* as this occurs with the current GA stack. *Steps to reproduce:*

Create a Titanium classic project

Replace app.js with the following code:

var window = Titanium.UI.createWindow({
	backgroundColor: 'white'
});
window.addEventListener('click', function(e) {
	alert('Window clicked');
});

var webView = Titanium.UI.createWebView();
webView.addEventListener('click', function(e) {
	alert('WebView Clicked');
});
    
var html = '<html>' + 
   '<body>' +
        '<br />' + 
        '<br />' + 
        '<br />' + 
        '<br />' + 
        '<br />' + 
        '<br />' + 
        '<a onclick="javascript:alert(123456)">Click me!</a>' +
   '</body>' + 
   '</html>';
webView.html = html;

window.add(webView);

window.open();

Install app to device or simulator

Once app is launched, press on "Click me!"

*Actual:* Only "WebView Clicked" and "Window clicked" alert dialogs appear; see attachment. *Expected:* Another alert dialog with "123456" should appear as well.

Attachments

File	Date	Size
no_onclick.mov	2015-11-12T02:07:05.000+0000	388561
TestWebView.zip	2017-03-07T08:35:56.000+0000	66217

Comments

Rene Pot 2016-05-23

Ok so it appears the same happens when you monitor a swipe event of a scrollview in which the webview is embedded... Is there progress on this task?
Vijay Singh 2017-03-07

In iOS webview do not allow touch event. For allowing the same it is implemented using hitTest method. So I created a sample app(attached as TestWebView.zip) for same use case . Titanium app is behaving similar to native. In native app if we allow touch event on webview, java script click event is not fired. If we do not allow touch event on webview in that case javascript click event is fired. In app created using Titanium SDK, if we do not handle click event then javascript click event is called.
Vijay Singh 2017-03-28

In doc http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.WebView, a note is mentioned for above behavior- "iOS Platform Implementation Notes On the iOS platform, the native web view handles scrolling and other related touch events internally. If you add event listeners on the web view or its parent views for any of the standard touch events (touchstart, click, and so on), these events do not reach the native web view, and the user will not be able to scroll, zoom, click on links, and so on. To prevent this default behavior, set willHandleTouches to false. In other words, you can have either Titanium-style events against the web view instance, or internal JavaScript events in the DOM, but not both." So the behavior in this ticket is expected.

Vijay Singh 2017-03-28

But for few titanium events - @"singletap",@"doubletap",@"twofingertap",@"swipe",@"pinch",@"longpress" we can allow native webview events as well. As above mentioned events are implemented in Titanium using UIGestureRecognizer, we can allow for multiple recognizer on webview. PR:https://github.com/appcelerator/titanium_mobile/pull/8913 Should we do the same ? [~emerriman] [~hansknoechel] thoughts ? Test Case-

   var window = Titanium.UI.createWindow({
       backgroundColor: 'white'
   });
   window.addEventListener('click', function(e) {
       alert('Window clicked');
   });
   
   var webView = Titanium.UI.createWebView({
       top: 10,
       left: 10,
       width: 300,
       height: 300,
       backgroundColor : 'red'
   });
   webView.addEventListener('singletap', function(e) {
       Ti.API.info('WebView: singletap event fired');
   });
   webView.addEventListener('doubletap', function(e) {
       Ti.API.info('WebView: doubletap event fired');
   });
   webView.addEventListener('twofingertap', function(e) {
       Ti.API.info('WebView: twofingertap event fired');
   });
   webView.addEventListener('swipe', function(e) {
       Ti.API.info('WebView: swipe event fired');
   });
   webView.addEventListener('pinch', function(e) {
       Ti.API.info('WebView: pinch event fired');
   });
   webView.addEventListener('longpress', function(e) {
       Ti.API.info('WebView: longpress event fired');
   });
   webView.addEventListener('click', function(e) {
       Ti.API.info('WebView: click event fired');
   });
   webView.willHandleTouches = false;
   
   var html = '<html>' + 
      '<body>' +
           '<br />' + 
           '<br />' + 
           '<br />' + 
           '<br />' + 
           '<br />' + 
           '<br />' + 
           '<a onclick="javascript:alert(123456)">Click me!</a>' +
      '</body>' + 
      '</html>';
   webView.html = html;
   
   window.add(webView);
   
   window.open();

Vijay Singh 2017-04-12

Backported PR (6_1_X): https://github.com/appcelerator/titanium_mobile/pull/8956
Harry Bryant 2017-04-13

Verified as fixed, "onclick" event now triggers correctly with multiple click events present. Tested for the added event types implemented from UIGestureRecognizer. Tested On: iPhone 7 10.2.1 Device iPhone 5S 9.3.5 Device Mac OS Sierra (10.12.2) Ti SDK: 6.1.0.v20170412080612 / 6.2.0.v20170412105625 Appc Studio: 4.8.1.201701192045 Appc NPM: 4.2.9-1 App CLI: 6.1.0 Xcode 8.2.1 Node v4.6.0 *Closing ticket.*

JSON Source