聚合物1.5/iOS：如何停止熨斗页面上的事件传播

我们有一个页面应用程序，它使用熨斗页面和快速路由器进行导航。在浏览器和Android上，它完美的工作，但在iOS上，我们有一个错误。如果我们通过按下按钮来切换页面，就会出现问题。如果按钮恰好位于输入文本字段元素上（读取：位于相同位置，但位于下一个熨斗页面上），则输入元素直接在页面切换后获得焦点。聚合物1.5/iOS：如何停止熨斗页面上的事件传播

我们曾经有这个问题，同样的位置有两个按钮，但这是通过改变所有的点击到水龙头解决。

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

添加event.stopPropagation到上敲击事件
包括fastclick.js防止点击延迟（这部分工作时，上点击仍然在地方，但为制造过时，带有on-tap）

请注意，自从Polymer 1.0全部通过1.5后，我们遇到了这个问题。

来源

2016-06-28 Remy Kabel

感谢@ tony19，为输入。

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

基本上发生的事情是，tap事件立即被触发，但它不会替代click事件。相反，点击事件仍会触发，但延迟时间为原来的300毫秒。这个延迟点击事件因此在新显示的“页面”上触发，并在相同的x-y坐标处触发输入字段（或按钮在那里）。

添加FastClick库再次解决了这个问题，这要归功于库中的一些更新。但是，它会打破一些需要原始点击的项目，例如Google自动填充。一个基本的解决方案，以排除FastClick是改为采用它作为：

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

然而，这仅适用于该节点和不可能的孩子。因此，要解决一切与谷歌的自动完成输入字段，以及利用做：

// 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);

我现在将关闭这个线程，但我认为它会是不错的离开这个作为参考其他任何人经历问题。

来源

2016-07-04 10:36:17

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

我有一对夫妇[哈克]解决方法的页面切换过程中使用：

选项1：延迟400ms的通过将换页。如果您的按钮有涟漪效应，延迟会被动画屏蔽。

codepen
选项2：禁用输入和400ms的延迟之后重新启用它。这样可以防止输入点击点击事件，但有一个缺点，即禁用状态可能很明显（可能比您当前的问题更小）。

codepen

来源

2016-06-28 19:26:08 tony19

了解它将聚合物1.0影响到1.5。只是为了确认我们在聚合物1.6中经历了相同的行为，并且以下修复了它。

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

来源

2017-01-25 05:02:23 coolersport

聚合物1.5/iOS：如何停止熨斗页面上的事件传播

回答

相关问题