This is a migrated thread and some comments may be shown as answers.

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

5 Answers 291 Views

Button (Mobile)

This is a migrated thread and some comments may be shown as answers.

John asked on 11 Jul 2012, 07:46 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml" >

<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>

<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 />

<a data-role="button" href="#two">Go To Page 2</a>

</div>

<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

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:

<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

answered on 15 Jul 2012, 11:04 AM

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!