背景:ionic3加angular4开发,点击事件使用了tap以后遇到的问题;html
首先,tap事件与click事件在移动端是有差异的, 文档说明,在移动端,click事件要比tap事件延迟300ms; 形成这个的缘由, 文档中说明是由于移动端先触发tap事件,若是300ms后手指不在触摸则为click. 这个设定也是可以理解的. 与桌面端不一样的是, 若是直接断定click. 那移动端的全部触摸事件就没法再触发了,会产生覆盖;angular4
知道了这个状况后,我过早的优化了咱们的APP,把全部click事件替换成了tap事件,因此就有了这篇文章; 血的教训老是上线后才发生....ionic
先上问题的截图性能
问题就是出在图中蓝色的删除按钮X. 在图片上点击是预览图片, 按钮上点击是删除图片. 优化以前都是click事件,毫无问题.优化后换成了tap事件,删除按钮便没法再被触发. 点击后只能显示图片预览. 感受上被覆盖了.测试
修改删除按钮的事件为click后,问题解决. 优化
<div class="image-container"> <div class="image-thumbnail" [style.background-image]="item.local | safeBgImage" *ngFor="let item of treatmentHistoryImages;let i=index" imageViewer="{{ item.local }}" > <ion-icon class="btn-remove" name="close-circle" mode="wp" (click)="removeImage($event, treatmentHistoryImages,i)"></ion-icon> </div> <div class="image-thumbnail btn-add-image" (tap)="addImage(treatmentHistoryImages)" [hidden]="treatmentHistoryImages.length==9"> <span class="text-tip btn-caption">添加照片</span> <span class="text-tip btn-foot">照片不超过九张</span> </div> </div>
这是修改后的代码, 注意图中removeImage 与 addImage的 事件绑定;spa
上线前根本就没有想到会有这样的问题, 也没有刻意的去作这个测试, 其余的tap事件彻底没有问题, 教训就是没有遇到性能问题前, 切莫过早的优化. 原罪..code