0

I do not believe this is adequately covered in similar posts (such as this one: prevent touchstart when swiping), when kendo mobile is involved.

My problem is that when I touch a (finite length) kendo mobile listivew to begin a swipe or scrolling gesture, the row I happen to touch immediately renders in its "::active" state, which in my CSS changes the background color of the row. Each row in the listview is an anchor and therefore needs to support the touch/tap interaction as well. This is annoying because it makes the user think they have selected the listview item, when in fact they haven't.

Kendo mobile decides what is a touch/tap, and what is a swipe. I do not. I am hoping there is some way prevent the touch highlight if a swipe is detected. I'm also open to changing how a touch is represented visually as long as it still involves changing the background color. Maybe a CSS color transform with a short delay up front? Any ideas?

Community
  • 1
  • 1
lje
  • 413
  • 5
  • 16

1 Answers1

0

Practically everything involving active states and gestures is a big hairy mess in mobile web browsers. The events are fired by the browser, somewhat refined by Cordova, then again refined by Kendo.

The big problem is that when your finger touches the screen, it can't possibly know that you are going to start swiping in a moment. in fact you could put your finger down on the screen and hold it there for 10 seconds before starting a gesture. Generally once you start a gesture, it cancels the click/tap event from happening and changes to a swipe instead, which should clear the active state.

I see the same behavior from practically every native app. Press and hold on a button and it will become "active" but if you slide your finger off of it, it becomes inactive again.

Your row should be removing the "active" state as soon as you start swiping.

From experience, I would honestly say that unless you want to spend a week fighting edge cases and ugly event handling code, don't fight the existing behavior.

Easier would be to just get rid of the background color change with CSS. For iOS7 the CSS would be:

.km-ios7 li.km-state-active .km-listview-link {
    #background-color: transparent;
}

But then on a tap event your user will not have any visual feedback that they pressed the item, which IMO is a worse user experience.

CodingWithSpike
  • 42,906
  • 18
  • 101
  • 138