点击事件被jQuery劫持而不是淘汰赛答案

【问题标题】：Click event hijacked by jQuery instead of knockout点击事件被jQuery劫持而不是淘汰赛
【发布时间】：2014-01-17 18:09:03
【问题描述】：

我正在使用Knockout webmail tutorial 作为我正在开发的单页应用程序的模板。

但是我在实现点击活页夹时遇到了麻烦，我以前也有过这种工作，但他的时间点击事件被劫持了。

我的视图模型有一个功能：

var self = this;
self.goToItem = function(item) { location.hash = "#/Item/" + item.id };

这是标准的。

<h2>Saved Items</h2>
<div data-bind="foreach: savedItems">
  <div data-bind="click: $root.goToItem">
    <p data-bind="text: name"></p>
  </div>
</div>

我试过了：

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

但是，很明显，尽管 foreach 有数据要循环，但它返回为空。

现在的问题是，鼠标事件点击现在被 jQuery 捕获，我之前没有必要深入研究这个，但我确信在没有 jQuery 的情况下可以运行淘汰赛。目前我唯一使用的 jQuery 用于 Ajax 调用。

那么我应该去哪里检查 DOM 对象上的事件，最好是在 Chrome 中？

jQuery如何对接？

【问题讨论】：

您的问题非常不清楚...您所说的“点击事件被劫持”是什么意思？点击会发生什么或发生了什么？
事件注册到点击绑定。但是，当事件被触发并使用事件断点进行监视时，它会在 jQuery 中进行处理。这让我感到吃惊。

标签： javascript knockout.js

【解决方案1】：

您是否尝试过使用 clickBubble 绑定？

防止事件冒泡

默认情况下，Knockout 将允许点击事件继续冒泡到任何更高级别的事件处理程序。例如，如果您的元素和该元素的父元素都在处理单击事件，则将触发这两个元素的单击处理程序。如有必要，您可以通过包含一个名为 clickBubble 的附加绑定并将 false 传递给它来防止事件冒泡，如下例所示：

<div data-bind="click: myDivHandler">
    <button data-bind="click: myButtonHandler, clickBubble: false">
        Click me
    </button>
</div>

通常，在这种情况下，首先调用 myButtonHandler，然后单击事件会冒泡到 myDivHandler。但是，我们添加的值为 false 的 clickBubble 绑定会阻止事件通过 myButtonHandler。

更多关于点击绑定的细节在这里http://knockoutjs.com/documentation/click-binding.html

【讨论】：

谢谢，问题不在于触发了太多事件，而是没有触发。通过在 Chrome 中单击鼠标设置断点，我可以看到该事件是在 jQuery 中处理的，这让我感到困惑，因为 jQuery 尚未为任何事件设置。我已经比较了我编写的另一个 SPA 和 jQuery 字段单击事件并调用淘汰赛。我将我的代码从具有工作单击事件的双 ViewModel 系统重构为没有工作的单 ViewModel 版本（基于邮件教程）。我在 Chrome 开发者工具中有这个：元素 -> 事件监听器给了我我需要的洞察力。

【解决方案2】：

如果我换了

click: $root.goToItem

与

click: goToItem

它又可以工作了。

似乎 jQuery 事件触发是一个红鲱鱼，我将它比作一个工作系统，它从 jQuery 开始。我不得不重温我的 DOM 调试，这不是坏事。

$root 是不是多余的，需要别人向我指出这一点。我确信在 foreach 循环中您只能通过 $root 访问 $root 函数。

【讨论】：