Question

我有一个使用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>

在桌面上一切正常。在每次刷新列表视图后的触摸设备上，首先点击#inc-button或#dec-button将触发两次。然后一切正常，直到列表视图刷新。

线索1：页面上有两个iScroll div，看起来可能会导致问题。论坛上有关于jQuery事件订阅的问题，但没有敲除绑定：

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

线索2：在列表视图刷新后，如果我触摸屏幕滚动然后按下按钮，则会触发一次操作

Answer 1

我认为这种方法很棒，我个人会使用JQuery Mobile，它有一个vclick事件，从经验来看，它对Android的响应速度也更快。

我已经不再使用移动网站/应用上的click绑定了。见这里：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/

knockoutjs“点击”绑定在触摸设备上触发两次（iscroll问题）

1 个答案: