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)
的子元素,这将是相关的。
我从 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)
的子元素,这将是相关的。