All geek questions in one place

Knockoutjs "click" bindings fire twice on the touch device (iscroll problem)

I have a dynamic list built with a knockout:

<ul class="menu-items-listview" id="items-list" data-role="listview" data-bind="foreach: Items" > <li class="menu-item"> <div class="menu-item-container"> <div class="menu-amount-container"> <a id="dec-button" data-bind="click:$root.decCount, visible:Count">-</a> <span data-bind="text: Count, visible: Count" class="item-amount-counter"></span> <a id="inc-button" data-bind="click:$root.incCount">+</a> </div> </div> </li> </ul>

Everything works fine on the desktop. On the touch device, each time after updating the list, the first press of the #inc-button or #dec-button will fire twice. Then everything will be fine until the list is updated.

Clue 1: There are two iScroll divs on the page, and it looks like this might cause a problem. The forums have questions regarding subscribing to jQuery events, but not knockout bindings:

Clue 2: after updating the list, if I touch the screen to scroll, and then press the button, the action will be run once

EDIT: This is definitely an iScroll issue. I disabled iScroll script and the actions fire once as they should

+4
source share
1 answer

I think this approach is wonderful, I personally used JQuery Mobile, which has a vclick event, since from experience it is also more susceptible to Android.

I refused to use click bindings on mobile websites / apps. See here: In jQuery mobile, what's the difference between tap and vclick?

 <ul class="menu-items-listview" id="items-list" data-role="listview" data-bind="foreach: Items" > <li class="menu-item"> <div class="menu-item-container"> <div class="menu-amount-container"> <a id="dec-button" data-bind="event: { vclick: $root.decCount }, visible:Count">-</a> <span data-bind="text: Count, visible: Count" class="item-amount-counter"></span> <a id="inc-button" data-bind="event: { vclick: $root.incCount }">+</a> </div> </div> </li> </ul>

There are alternatives to this, and you can always have a stripped down version of JqM using your bootloader to get the minimum size needed for specific touch events.

EDIT: also, if the problem is only solved with iScroll, can you try and add CSS to scroll the iOS momentum instead? Usually did the trick for me. Then you at least avoid one addiction. See here: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/

0
source

Source: https://habr.com/ru/post/1490537/

More articles:


All Articles