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

【问题标题】：knockoutjs "click" bindings fire twice on a touch device (iscroll issue)knockoutjs“点击”绑定在触摸设备上触发两次（iscroll 问题）
【发布时间】：2013-07-09 17:05:14
【问题描述】：

我有一个用淘汰赛构建的动态列表视图：

<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 事件订阅但没有淘汰绑定的问题：

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

编辑：这绝对是 iScroll 问题。我禁用了 iScroll 脚本，并且动作按应触发一次

【问题讨论】：

你会做一个小提琴吗？我会在 iPhone 上测试/调试它，如果你做的话。
一位智者曾经告诉我要为工作选择合适的工具，我个人总是选择 jQuery 进行事件绑定和淘汰赛进行 DOM 绑定。我发现它解决了我的很多这样的问题，因为 jQuery 在事件处理方面很棒。
@abc123 如果我使用 jQuery，我将不得不费心选择正确的项目来更改其 Count 属性。这意味着将项目的 id 添加到 DOM 并定义选择器以订阅点击。而且，我想，我将不得不取消订阅并在列表视图刷新时重新订阅。我说的对吗？
@Cubius 完全正确...除了在 jQuery 单击事件中您始终可以使用键“this”。但是，是的，因为这听起来越来越像单页应用程序，是的。内存管理非常重要，内存泄漏的关键是事件绑定。
在元素的 iScroll 配置中，设置选项 click: false 对我有用。

标签： jquery knockout.js iscroll

【解决方案1】：

我认为这种方法很棒，我个人会使用具有vclick 事件的 JQuery Mobile，因为根据经验，这在 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/

【讨论】：