Click event does not fire reliably in Kendo UI for jQuery

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

Click event does not fire reliably

18 Answers 818 Views

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

This question is locked. New answers and comments are not allowed.

Marco asked on 06 Mar 2014, 11:49 AM

My mobile app build with kendo ui failed user acceptance testing because the app is "slow", "sluggish" or "sometimes stops working". After some research I found out that the app quite often fails to react when the user clicks a button: the click event does not fire when the user does not tap "the right way". Since my app aims at inexperienced users, this is a serious issue.

The problem can easily be reproduced in the button/events demo, especially when viewed on a mobile device:

http://demos.telerik.com/kendo-ui/mobile/button/events.html

Just between touching and releasing move the finger or mouse a little bit to the side or up/down, and the click event does not fire.

What's worse (and why i would consider this an error) is that the user gets a visual feedback that the button was pressed --- but nothing happens!

It's kind of like the opposite of the problem in this thread: http://www.telerik.com/forums/button-click-event-firing-when-trying-to-scroll where someone is (ab?)using oversized buttons.

Is there a way to set the sensibility of how much wiggle is allowed until a touch isn't a click anymore? Any other solution?

I am using kendoui.complete.2013.3.1119. The behaviour was tested on iOS6 & iOS 7 (iPad).

TIA Marco

18 Answers, 1 is accepted

-1

answered on 10 Mar 2014, 07:41 AM

Hi Marco,

Thank you for your feedback. A move threshold sensitivity constant is available internally, but not yet exposed as a configuration option. Our tests so far show that most mobile devices include such internal threshold too, the only "problematic" platform being Windows Phone. The line in question is:

DEFAULT_THRESHOLD = support.browser.msie ? 5 : 0, // WP8 and W8 are very sensitive and always report move.

you may experiment with this setting and see if it improves the behavior in your case.

Regards,
Petyo
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

-1

answered on 19 Feb 2015, 12:52 PM

I have a PhoneGap 3.7.0 built app using Kendo UI Pro 2014.3.1409 targeting Android and iOS, which is exhibiting issues when tapping a button in the navbar using an iOS device running 8.1.3 (seen on iPhone 5, iPhone 6, and iPad).

I have tried setting kendo.UserEvents.defaultThreshold(20), but this has not helped.

Here's a block from one of our views...

<div data-role="header">
<div data-role="navbar">
<a href="#view1" data-role="button" data-icon="my-back" class="nav-button" data-align="left"></a>
<span data-role="view-title"></span>
<a href="#view2" data-role="button" data-icon="my-settings" class="nav-button" data-align="right"></a>
</div>
</div>

I have also tried using kendoTouch attached to a div, but that also has not helped.

Is this still a known issue as from all out testing the firing of click events on iOS is very random and currently we have an unshippable app. As a side note, Android is absolutely fine.

Thanks in advance!

Heath

-1

answered on 19 Feb 2015, 03:56 PM

Hello guys,

I would like to to point out that the following snippet is incorrect, and does not affect the mobile app navigation handling:

var app = new kendo.mobile.Application(document.body, {

transition: 'slide',

loading: "<h1>Please Wait...Getting Data....</h1>",

skin: "flat",

init: function() {

kendo.UserEvents.defaultThreshold(20);

}

});

the threshold should be set before the instantiation of the app:

kendo.UserEvents.defaultThreshold(20);

var app = new kendo.mobile.Application(document.body);

I would like to advise you all to update the implementation accordingly for improved results.

Regards,
Petyo
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

-1

answered on 26 Feb 2015, 10:30 PM

Thanks Petyo.

I did not see any improvement though. On all iOS (v8.0+) devices I tested, I would see an unpredictable "highlighting" of the button but the code doesn't trigger, if user did not touch "correctly". I do not understand why Kendo / Telerik would us developers to do this on our own instead of putting these adjustments within their touch framework

Using Cordova 4.2 iOS platform 3.7.0 / Kendo 2014.3.1411 / jQuery 2.0.3 - no other js libraries used
Here is my code:

<header data-role="header">

<div data-role="navbar">

<a data-align="left" data-role="backbutton">

Back

</a>

<div data-role="title"

data-bind="text: viewTitle"

style="font-size: 0.7em;">

</div>

<a data-align="right" data-role="button" data-bind="click: save">

<i class="icon-stack"></i>

Save

</a>

</div>

</header>

Code before initializing mobile app.

kendo.UserEvents.defaultThreshold(kendo.support.mobileOS.device === 'android' ? 0 : 20);

-1

answered on 26 Feb 2015, 10:38 PM

Thanks. I did not see any improvement though. On all iOS (v8.0+) devices I observed, button will be "highlighted" but code will not execute if the user did not tap correctly. I do not understand why Kendo / Telerik would advise us developers to do this on own own instead of putting these adjustments within the touch framework.

Using cordova 4.2 iOS platform 3.7.0 / Kendo UI Mobile 2014.3.1411 / jQuery v2.0.3 with no other JS frameworks used.

Before initializing the mobile app instance:

kendo.UserEvents.defaultThreshold(kendo.support.mobileOS.device === 'android' ? 0 : 20);

Markup:

<header data-role="header">

<div data-role="navbar">

<a data-align="left" data-role="backbutton">

Back

</a>

<div data-role="title"

data-bind="text: viewTitle"

style="font-size: 0.7em;">

</div>

<a data-align="right" data-role="button" data-bind="click: save">

<i class="icon-stack"></i>

Save

</a>

</div>

</header>

Please help.

-1

answered on 27 Feb 2015, 07:23 AM

Hello,

This is a good question. Configuring the userevents threshold has some adverse effects on other parts of the framework, namely the drag and drop ones. The mobile scroller is also affected.

I am not sure why the configuration does not work in your case, though. I don't think that the cordova environment matters in that case - I may be wrong, though. Is there a chance for you to isolate your case in a runnable Dojo? We will examine it more closely. Thank you in advance.

Another thing worth mentioning here is the following new feature, introduced in the Q1 2015 release (currently available as beta) - mobile buttons may be configured to act on press (instead on release). This makes sense for buttons in the header/footer parts of the application.

Regards,
Petyo
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

-1