Android - JavaScript : touchstart event not fired until zoom or scroll the page

Question

In my Android application, The user can browse some HTML pages using ViewPager, and the user can touch an element to highlight.

the problem is when trying to get the touch event using javascript using the following code, elementFromPoint returns null when navigate to new page, but after the user zoom the page or scroll on it, it works right.

I found that register of the touchstart event happens after zoom or scroll the page. so it works right after that although it is registered on $(document).ready()

        $(document).ready(function(){
            document.addEventListener("touchstart", touchstart, false);     
        });     

        function touchstart(e) {                              
            var x = e.targetTouches[0].clientX; 
            var y = e.targetTouches[0].clientY;                             
             el = document.elementFromPoint(x, y);  
            }

Thank you

score 7 · Accepted Answer · answered Jan 29 '13 at 07:43

7

write next code in your java code after calling javascript :

    myWebview.scrollTo(1, 0);
    myWebview.scrollTo(0, 0);

or use zoom in then zoom out

    myWebview.zoomIn();
    myWebview.zoomOut();

answered Jan 29 '13 at 07:43

Mohamed Abdel Latif

86
2

Feels pretty hacky, but it works. By the way, if you are animating your WebView in from offscreen, you'll need to run these lines of code after the animation has completed. I set it up in an Animator.AnimatorListener()'s onAnimationEnd method and it works great. I also confirmed that it works even if the content of the page is not large enough to require scrolling. – Brian Rak Sep 10 '13 at 21:31
Brian - do you remember if the webview was white if you didn't wait for the animation to complete and called the zoomin/zoomout methods ? – Someone Somewhere Feb 26 '14 at 23:36
I've been using the zoomin/zoomout method without the AnimatorListener and I noticed (especially on Kindle) that the webview is sometimes white eventhough the page was loaded. So then I switched to the scrollTo method (again, without AnimatorListener) and I no longer see the white webview. – Someone Somewhere Feb 26 '14 at 23:41

Someone Somewhere · Answer 2 · 2014-02-26T23:42:44.303

using Mohamed Abdel Latif's solution (obviously this is another lame WebView bug) below is what fixed it for me on Android 4.1.2. Note: I tested this on Android 4.4.2 and this hack-to-fix-a-bug isn't needed.

@Override
public void onCreate(Bundle savedInstanceState)
{

    final WebView myWebView = (WebView) findViewById(R.id.mywebview);
    myWebView.setHorizontalScrollBarEnabled(false);
    myWebView.getSettings().setJavaScriptEnabled(true);
    myWebView.loadDataWithBaseURL("file:///android_asset/", YOUR_HTML_GOES_HERE, "text/html", "utf-8", null);

    myWebView.setWebViewClient(new WebViewClient()
    {
        // overcome the ontouchstart registration bug !
        @Override
        public void onPageFinished(WebView view, String url)
        {
            super.onPageFinished(view, url);
            final WebView myWebView = (WebView) findViewById(R.id.mywebview);
            myWebview.scrollTo(1, 0);
            myWebview.scrollTo(0, 0);
        }
    });
}

Android - JavaScript : touchstart event not fired until zoom or scroll the page

2 Answers2