jquery - knockoutjs "click"绑定(bind)在触摸设备上触发两次(iscroll 问题)

Question

我有一个用 knockout 构建的动态 ListView :

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

在桌面上一切正常。在触摸设备上，每次刷新 ListView 后，首先点击 #inc-button 或 #dec-button 会触发两次。然后一切正常，直到 ListView 刷新为止。

线索1:页面上有两个iScroll div，看起来可能是导致问题的原因。论坛上有一些有关 jQuery 事件订阅但不涉及 knockout 绑定(bind)的问题:

1. https://github.com/cubiq/iscroll/issues/270
2. How can I trouble shoot click events being triggered twice?

线索2: ListView 刷新后，如果我触摸屏幕滚动，然后按下按钮，操作就会触发一次

编辑:这绝对是 iScroll 问题。我禁用了 iScroll 脚本，并且操作按其应有的方式触发一次

Answer 1

我认为这种方法很棒，我个人会使用 JQuery Mobile，它有一个 vclick 事件，根据经验，这在 Android 上也更具响应性。

我已经不再在移动网站/应用程序上使用click绑定(bind)。参见这里:In jQuery mobile, what's the diff 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>

对此还有其他选择，您始终可以使用其下载构建器获得 JqM 的精简版本，以获得触摸特定事件所需的最低限度。

编辑:如果仅通过使用 iScroll 就解决了问题，您可以尝试添加 iOS 动量滚动的 CSS 吗？通常都为我完成了这个伎俩。那么你至少可以避免一种依赖。参见这里:http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/