ionic2 点击与点击答案

【问题标题】：ionic2 tap vs clickionic2 点击与点击
【发布时间】：2018-05-17 18:50:50
【问题描述】：

我从 angular2 和 ionic2 开始；

在 ionic2 中，我有一个按钮，它将调用我的组件的方法。像这样：

<button secondary clear large>
</button>

我应该使用(click) - angular2 还是 (tap) - ionic2？

像这样：

(click)

<button secondary clear large (click)="pause()">
</button>

(tap)

<button secondary clear large (tap)="pause()">
</button>

有什么不同吗？你可以看到关于(tap) in http://ionicframework.com/docs/v2/components/#gestures

谢谢。

【问题讨论】：

因为 Ionic 2 建立在 Angular 2 之上。所以在按钮内部你应该使用（点击）事件。

标签： angular ionic2 click ionic3 tap

【解决方案1】：

如果制作移动应用程序，(tap) 可能会更好。这是因为当使用(click) 时，该操作始终会执行，即使是在意外点击时也是如此。如果用户持有较长时间，(tap) 将不会执行。如果你想要一个需要长时间点击的按钮，你可以使用(press)。

请注意，在某些 ionic 版本中，(click) 事件不会在 iOS 上执行。因此使用(tap) 将是推荐的解决方案。

【讨论】：

您已经强调了我需要在我的应用程序的某些地方使用点击的确切原因。如果您使用(click) 和(press)，那么两者都会在“按下”时执行。如果您使用(tap) 和(press)，情况并非如此
听说过 .stopPropagation(); ?
@JoeriShoeby - 尝试event.stopPropagation() 在表格单元格上滑动以删除并单击以显示详细信息。使用click() 时，无论如何都会显示细节，stopPropagation() 没有效果。改为tap() 解决了这个问题。

【解决方案2】：

我认为这真的取决于您希望用户体验有多“原生”。

(tap) 事件来自Hammer.js library。如果您查看链接，您将看到触发点击事件必须满足的要求。

首先要注意的是 time 选项，默认值为 250 毫秒。这意味着如果按下大于 250 毫秒，则事件不会触发。

要注意的第二个要求是 threshold 选项，默认值为 2（不确定这是什么单位，可能是像素）。这意味着如果压力机的移动大于 2，则不会触发该事件。例如。在屏幕上方从左到右移动手指，然后在此移动过程中按下元素，根据移动速度，事件可能不会触发。

然而

(click) 事件在我刚刚指出的两种情况下仍然会触发，前提是当按下时它仍然在目标元素内。

一开始我说“这真的取决于”的原因是基于其他应用程序如何处理这些场景（每个应用程序可能会有所不同，也可能会根据用例的结果而有所不同）。

据我所知，我检查过的 Android 应用程序上的按钮（具有视觉结果的按钮，例如导航或弹出消息）的工作方式与 Angular 提供的 (click) 事件相同。

我无法评论 IOS 应用程序如何使用我未测试过的相同原理。

我并不是暗示在每个用例中都应该使用 (click) 而不是 (tap)，但请尝试考虑其他本机应用程序的行为并从中决定哪个最合适。

【讨论】：

离子依赖于 Hammer.js 库？
离子手势可以。 ionicframework.com/docs/v2/components/#gestures 在文档的其他 beta 版本中，他们曾经提到过这一点，但看起来他们没有在最新版本中

【解决方案3】：

我想补充一点，您可以对button, a 等元素使用（点击）事件，但对于非按钮元素，tappable 属性很有用：

如果您想立即点击非按钮元素，您必须向该元素添加tappable 指令，否则它会有 300 毫秒的延迟。例如：

<div tappable (click)="someHandler()">Click me</div>

【讨论】：

但您也可以在按钮上使用tap。那么有什么更好的呢？点击（）或点击（）+可点击？
取决于 html 元素，对于 button 和 a (link) 元素，我会使用 (tap) 事件，但其他 html 元素我会使用 tappable 指令 + (click) eventç

【解决方案4】：

我在 iOS 中使用 (click) 时遇到问题，但在 Android 中它工作正常。在 iOS 中，当我更改应用程序语言时，点击链接后它什么也没做。我认为这与 Ionic 点击拦截器https://github.com/driftyco/ionic/issues/6996 有关。

但是在我将(click) 更改为(tap) 后，语言更改链接立即生效。当语言选择没有做任何事情（即使等待了一段时间）并且也将其从 (click) 更改为 (tap) 时，我也遇到了问题，现在它可以正常工作了。

【讨论】：

这里也一样。某些离子版本似乎无法在 iOS 上激活 (click)
您是否尝试过使用适用于 iOS 的 ionic 的 WKWebview 插件？ ionic iOS 应用在事件和性能方面工作得更好：ionicframework.com/docs/wkwebview

【解决方案5】：

除了投票最多的问题，我想指出(tap) 在用作参数时处理$event 的方式不同。如果我没记错的话，当使用(tap) 时，$event 中的target 属性将是您实际点击的元素，而不是具有(tap) 事件绑定的元素。如果您的元素中有子元素并绑定了(tap)，这将是相关的。

【讨论】：

这是否意味着当我有一个带有点击事件的<ion-list> 并且我点击一个孩子<ion-item> 时，我可以从事件中看到点击了哪个项目，而不必复制粘贴点击功能？
@Ivaro18 $event 变量将保存您点击的元素，这意味着如果您需要 <ion-list> 元素，您必须在父元素中跟踪它我的意见是一件非常老套的事情。在某些情况下，您可以通过传递所需的实际数据（如果可用）而不是使用 $event 来绕过这种不良做法。

【解决方案6】：

iOS 通常存在点击事件的问题（网络事件，如果您在浏览器控制台中的响应式移动设备中进行测试）。

所以通常发生的情况是用户必须单击两次才能执行操作。

我发现这是因为如果您正在进行移动开发（chrome 控制台甚至 iOS 模拟器），您将不得不使用 (tap) 事件。

这个问题很难知道，因为它是不规则的行为，当你使用 (click) on 时，

一些通常不可点击的东西，就会出现这个问题。

因此，如果您在此类元素上使用 (tap) 并 (click) on ，则一切正常。

我的建议是更好地使用两者！

【讨论】：