Polymer 1.5/iOS：如何停止铁页上的事件传播

Question

我们有一个单页应用程序，它使用 iron pages 和 express-router 进行导航。在浏览器和 android 上，它运行良好，但在 iOS 上，我们有一个错误。如果我们通过按下按钮切换页面，就会出现问题。如果按钮恰好位于输入文本字段元素上方（读取：在相同位置，但在下一个铁页上）输入元素在页面切换后直接获得焦点。

我们过去也遇到过这个问题，两个按钮位于同一位置，但通过将所有点击更改为点击解决了这个问题。

到目前为止我们已经尝试过的事情：

将 event.stopPropagation 添加到点击事件
包括 fastclick.js 以防止点击延迟（这在点击仍然存在但在点击时已过时的情况下部分起作用）

请注意，从 Polymer 1.0 到 1.5，我们都遇到过这个问题。

Answer 1

我在 iPad Air 2 上重现了您的症状，尝试 e.stopPropagation()、e.preventDefault() 并返回 false 都没有效果。我不确定这是否真的是聚合物问题。

在页面切换期间，我有几个 [hacky] 解决方法可以使用：

选项 1： 将页面更改延迟 400 毫秒。如果您的按钮有涟漪效果，则延迟会被动画掩盖。

codepen
选项 2： 禁用输入并在 400 毫秒延迟后重新启用它。这可以防止输入接收点击事件，但缺点是禁用状态可能会很明显（可能比您当前的问题更不严重）。

codepen

Answer 2

感谢@tony19 的意见。

我们想避免延误，所以我进行了更多研究并最终解决了这个问题。回答我自己的问题：最终的解决方案确实存在于 FastClick 库中。

基本上，tap 事件会立即触发，但不会替换点击事件。相反，点击事件仍然会触发，但会延迟原来的 300 毫秒。因此，这个延迟的点击事件会在新显示的 'page' 上触发，并在相同的 x-y 坐标处触发输入字段（或按钮，如果它在那里）。

由于库中的一些更新，再次添加 FastClick 库解决了这个问题。但是，它会破坏一些需要原始点击的项目，例如 Google 自动完成。排除 FastClick 的基本解决方案是将其应用为：

FastClick.attach(document.body, {
    excludeNode: 'something', });

但是，这仅适用于该节点，不适用于可能的子节点。因此，要使用 Google 的自动完成修复输入字段的所有内容，也可以使用：

// Disable FastClick for the children of a google auto-
// complete component.
var needsClick = FastClick.prototype.needsClick;
FastClick.prototype.needsClick = function(target) {
    if ( (target.className || '').indexOf('pac-item') > -1 ) {
        return true;
    } else if ( (target.parentNode.className || '').indexOf('pac-item') > -1) {
        return true;
    } else {
        return needsClick.apply(this, arguments);
    }
};

// Remove click delay on iOS. As such, removing differences
// in timing between click and tap, thereby avoiding the
// fall-through problem.
FastClick.attach(document.body);

我现在将关闭此线程，但我认为最好将其留作其他遇到问题的人的参考。

Answer 3

了解到它影响了 Polymer 1.0 到 1.5。只是为了确认我们在 Polymer 1.6 中遇到了相同的行为并且以下修复了它。

_onTap: function(event) {
    event.preventDefault();
    event.stopPropagation();
}

Polymer 1.5/iOS：如何停止铁页上的事件传播

Polymer 1.5/iOS: How to stop event propagation over iron-pages

javascript

dom-events

ios

polymer

polymer-1.0