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.
Any help with a fix is greatly appreciated.
Thanks
John
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
5 Answers, 1 is accepted
0
John
Top achievements
Rank 1
Rank 1
answered on 13 Jul 2012, 04:50 PM
Update: I have narrowed the problem down to specifying the data-role="button" or data-role="backbutton" attribute:
For Example:
Removing the data-role attribute with these parameters no longer produces the double clicking behaviour:
To maintain the look of a button, I specified the km-button class attribute:
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
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
0
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
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!
0
teo
Top achievements
Rank 1
Rank 1
answered on 24 Jul 2012, 11:56 AM
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
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?
0
John
Top achievements
Rank 1
Rank 1
answered on 25 Jul 2012, 01:08 PM
For the workaround provided:
If I use data-role="backbutton", do I need to do this as well?
$(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);0
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
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!