Back button fires double-click on touch devices. Possible Bug?

6 posts, 0 answers
  1. John
    John avatar
    17 posts
    Member since:
    Aug 2012

    Posted 11 Jul 2012 Link to this post

    Hi,
    I have found that if you navigate to a view, and use the back button on the second view to jump back to the first, if you are using a touch device and hold the back button too long, it will trigger a double-click event and activate any controls on the original page that are in the same spot as the back button.

    I have constructed an isolated application that can reproduce this erroneous behavior using kendo v2012.2.710.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <head>
            <title>Kendo Link Double Clicking</title>
            <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
            <script src="kendo.mobile.min.js" type="text/javascript"></script>
            <link href="kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
     
        </head>
         
        <body>
     
            <!-- View 1 -->
            <div id="one" data-role="view">
                        
                <div class="km-navbar" data-role="navbar">
                    <input id="searchInput" type="search" data-align="left" placeholder="Search Box"/>
                    Page 1
                </div>
                <br />
                <span>Click the button to be taken to the 2nd page</span>
                <br />
                <br />
                <a data-role="button" href="#two">Go To Page 2</a>
         
            </div>
                     
            <!-- View 2 -->
            <div id="two" data-role="view">
                <div class="km-navbar" data-role="navbar">
                    <a data-role="backbutton" class="km-button km-back" href="#:back" data-align="left">Back</a>
                    Page 2
                </div>
                <br />
                <span>Possible Bug: On a touch device, holding the back button for too long will trigger a double click.</span><br />
                <span>If there is an textbox in the same place on the new page as the button pressed, it will be set into focus.</span><br />
                <span>If there is a soft keyboard, it will also activate.</span><br /><br />
            </div>
     
        </body>
        <script type="text/javascript">
            var app = new kendo.mobile.Application($(document.body));
        </script>
    </html>

    Any help with a fix is greatly appreciated.

    Thanks
    John
  2. John
    John avatar
    17 posts
    Member since:
    Aug 2012

    Posted 13 Jul 2012 Link to this post

    Update: I have narrowed the problem down to specifying the data-role="button" or data-role="backbutton" attribute:

    For Example:
    <a data-role="button" href="#two">

    Removing the data-role attribute with these parameters no longer produces the double clicking behaviour:
    <a href="#two">

    To maintain the look of a button, I specified the km-button class attribute:
    <a class="km-button" href="#two">

    However, there isn't the natural highlighting behaviour that goes with clicking it when data-role="button" is present, or the custom arrow shape when data-role="backbutton".

    Hope this helps,
    John
  3. Kendo UI is VS 2017 Ready
  4. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Jul 2012 Link to this post

    Hello John,

    Thank you for noticing this and for the sample, I've updated your points for this. The issue turned out to be a ghost click which is fired on the same place where the button has been 300ms after touchend. This in fact is the real click event which Mobile Safari fires for desktop compatibility some time after the touch events in order to have enough time to decide if the touch events need to be handled, or if there's a gesture involved. Our buttons use the touchend event instead of a click for faster navigation (since the click is 300ms slower), however the click is still fired even though it has been prevented. To work around this, the touchstart event should also be prevented. We already did a fix for the next internal build and the service pack. Until then, you can do it manually by adding this after the mobile application init:
    $(document.body).on("touchstart", "[data-role*=button]", false);

    Let me know if this helps.

    Greetings,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. teo
    teo avatar
    1 posts
    Member since:
    Jul 2012

    Posted 24 Jul 2012 Link to this post

    I think that i have the same problem but it's little different in my app it doesn't work only the back button and in eclipse shows that error :
    07-24 14:01:15.450: E/Web Console(18914): Uncaught TypeError: Cannot call method 'split' of undefined at file:///android_asset/www/js/kendo.all.min.js:8

    what i can do?
     thank you
  6. John
    John avatar
    17 posts
    Member since:
    Aug 2012

    Posted 25 Jul 2012 Link to this post

    For the workaround provided:

    $(document.body).on("touchstart", "[data-role*=button]", false);

    If I use data-role="backbutton", do I need to do this as well?
    $(document.body).on("touchstart", "[data-role*=button]", false);
    $(document.body).on("touchstart", "[data-role*=backbutton]", false);
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 27 Jul 2012 Link to this post

    Hello John,

    No, the * in the selector means that the "button" string can be part of the whole attribute.

    Greetings,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready