ionic2 点击与点击

ionic2 tap vs click

我从 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) 中看到 http://ionicframework.com/docs/v2/components/#gestures

谢谢。

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

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

我认为这实际上取决于 "native like" 您希望用户体验如何。

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

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

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

但是

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


一开始我说 "it really depends" 的原因是基于其他应用程序处理这些场景的方式(每个应用程序可能会有所不同,并且根据用例的结果也可能会有所不同)。

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

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

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

我在 iOS 中遇到 (click) 的问题,但在 Android 中它工作正常。在 iOS 中,当我更改应用程序语言并在单击 link 之后它没有做任何事情。我认为这与 Ionic 点击拦截器有关 https://github.com/driftyco/ionic/issues/6996

但是在我将 (click) 更改为 (tap) 之后 link 立即生效。当语言选择没有做任何事情(甚至在等待一段时间后)并将其从 (click) 更改为 (tap) 时,我也遇到了问题,现在它完美地工作了。

iOS 一般点击事件有问题(网络事件,如果您在浏览器控制台中的响应式移动设备中进行测试)。

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

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

这个问题很难知道,因为它是不规则的行为,当您使用(单击)

通常不可单击的东西时,就会出现这个问题。

因此,如果您在此类元素上使用(点击)并在 上使用(单击),一切都应该正常。

我的建议是两者兼用!

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

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

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

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