angular - ionic2 点击与点击

Question

我从 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>

谢谢。

score 52 · Accepted Answer

如果制作移动应用程序，(tap)可能会更好。这是因为当使用(click)动作时总是执行，即使是在不小心轻敲的时候。(tap)如果用户持有较长时间，则不会执行。如果你想要一个需要长时间点击的按钮，你可以使用(press).

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

score 11 · Accepted Answer

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

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

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

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

然而

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

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

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

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

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

score 3 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

score -1 · Accepted Answer

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

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

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

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

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

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

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

6 回答 6