Platform.js (Polymer)、jQuery 2.x.x 和 Bootstrap - 错误答案

【问题标题】：Platform.js (Polymer), jQuery 2.x.x and Bootstrap - errorPlatform.js (Polymer)、jQuery 2.x.x 和 Bootstrap - 错误
【发布时间】：2014-07-24 19:25:42
【问题描述】：

在空白页面上包含 Platform.js (v0.3.4) (Polymer)、jQuery (v2.x.x) 和 Bootstrap.js (v3.2.0) 后，我遇到了一个奇怪的错误。

对于 Safari 和 Firefox，在（空）页面上的某些事件（例如单击或键位）上，它会引发错误：

TypeError: 'undefined' 不是函数（评估 'elem.getAttribute(name)'）

jQuery v1.11.1没有问题，其他版本的Platform也没试过。 Chrome 或 Opera 都没有。

如果我在 Bootstrap 中将所有的“点击”替换为“dblclick”，则点击不会再出现错误（当然会发生在 dblclick 上）。

嗯，这没什么大不了的，但令人惊讶。

这是要测试的代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>PJB</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
    </head>
    <body>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    </body>
</html>

如果有人知道如何在不破坏平台的 jQuery Bootstrap 的情况下避免此错误，我很高兴知道。

谢谢。

【问题讨论】：

你提到的事件是在哪里定义的？
它们在 bootstrap.js 中定义。这只是我写的 12 行 HTML。但是如果我定义了其他事件，例如$('#el').click(function() {})，监听器会工作，但它也会抛出其他错误。
我明白了，很时髦。无论如何，您都不应该点击身体； bootstrap 喜欢一个视口范围的容器。我猜这是 body 下的一个委托事件，当它将 body 视为目标时，它会假发...
是的，时髦！好吧，当然我们不点击正文，但为了避免错误，我必须在页面上的每个可点击和可键入（因为 Bootstrap 使用很多这些）元素上添加event.stopPropagation()。但是我不太明白为什么 Platform.js 会干扰它...

标签： javascript jquery twitter-bootstrap polymer platform

【解决方案1】：

我相信这个问题与这个问题有关：https://github.com/Polymer/platform/issues/69

修复似乎是包装文档和/或 document.body。例如：

(function(document) {
  // add your jquery handlers here...
  $(document).on('click', ...);
})(wrap(document));

【讨论】：

谢谢。经过一些阅读和测试，我基本上将所有 Bootstrap 都包装在您给我的代码中。它在 Safari 上完美运行（仍然在 Chrome 上）我可以显示和隐藏 Bootstrap 的模式。但是当我尝试显示模式时，Firefox 会抛出以下错误TypeError: Argument 1 of Window.getDefaultComputedStyle does not implement interface Element.。当我们使用 $ .css() 函数时会发生这种情况。我想这是因为我将所有内容都包装在函数中，我将尝试仅包装事件侦听器:)