[Phonegap+sencha Touch] mobile development on Android and iOS WebView click-through mitigation

There's a strange phenomenon under Android's WebView and its own browser.

Phenomenon :

1, if the input box inputs or textarea (z direction, that is, the upper layer) has a div, when the div is clicked to make the div hidden, input will get focus, resulting in a soft keyboard popup.

2, browse view click a place to switch to edit view, if the browse view click on the location of the edit view has an input box, then after the switch, the Edit page input box will automatically get focus.

The experience is very uncomfortable.

discussion :

This is not caused by event bubbling of the Click event (because E.stoppropagation () and return false are useless), because if the input box is replaced with a button, the button event is not triggered.

Android comes with browser and webview This problem, iOS seems to have, mobile version of Chrome does not have this phenomenon.

So this is the WebView bug.

Yesterday found a relief, why not call the solution? Because of the Android bug I can not improve, only through a number of techniques to avoid this problem.

All right, here's the way:

1, write a cssnamed prevent-pointer-events (the name does not matter, take it yourself), the contents are as follows:

. x-container.prevent-pointer-events input,. x-container.prevent-pointer-events textarea {pointer-events:none;}

Pointer-events:none: As implies means that the mouse event is the meaning of goodbye (of course, the touch event is the same). Element applies this CSS property, link Ah, click Ah what has become "floating cloud brand soy sauce."

Input and textarea with this CSS style cannot be focused.

2. Monitor Ext.viewport before and after the Avtiveitemchange event . Add the prevent-pointer-events style to the new view you want to switch to before the Avtiveitemchange event, and after the Avtiveitemchange event, Remove the prevent-pointer-events style from the new view you have switched to (of course, it will take a while to remove it, otherwise it won't work, like after 300ms)

Ext.Viewport.onBefore (' Activeitemchange ', function (container, NewItem, Olditem) {     if (newitem.element)         NewItem.element.addCls (' prevent-pointer-events '); }, this); Ext.Viewport.onAfter (' Activeitemchange ', function (container, NewItem, Olditem) {    setTimeout (function () {        if (newitem.element)            NewItem.element.removeCls (' prevent-pointer-events ');}, ();    }, this);

If you use Navigationview to switch between views, you should also add these two event handlers before and after the Navigationview Avtiveitemchange event ( Remember Navigationview in destroy when the two event listener handler function is removed, otherwise there may be a script error can ' t call method ' removecls ' of undefined. Remove the listener with Unbefore and Unafter).

3, there is another place. When the Ext.msg pop-up message box, click the Message box button to hide the message box, and if the message box button is directly below the input box, the input box will be focused. So here we have to deal with (the same way, all sorts of other situations).

When the message box pops up, a mask mask layer is displayed, and we can add a prevent-pointer-events style to the view that is directly below it when the mask is displayed, and when the mask is hidden, Remove the prevent-pointer-events style from the view just below it

Ext.Viewport.on ({    delegate: ' Mask ',    show:function (mask) {        var activeitem = Ext.Viewport.getActiveItem () ;        if (activeitem.element)            activeItem.element.addCls (' prevent-pointer-events ');    },    hide:function (mask) {        var activeitem = Ext.Viewport.getActiveItem ();        SetTimeout (function () {            if (activeitem.element)                activeItem.element.removeCls (' prevent-pointer-events ');        } , ();    });

Welcome to Sencha Touch + Phonegap Group: 194182999

Joint Learning Communication (blogger qq:479858761)