ionic3开发中遇到的坑

 ionic3中tap事件与click事件的一些bug

 

背景:ionic3加angular4开发,点击事件使用了tap以后遇到的问题;

首先,tap事件与click事件在移动端是有差异的, 文档说明,在移动端,click事件要比tap事件延迟300ms; 形成这个的缘由, 文档中说明是由于移动端先触发tap事件,若是300ms后手指不在触摸则为click. 这个设定也是可以理解的.  与桌面端不一样的是, 若是直接断定click. 那移动端的全部触摸事件就没法再触发了,会产生覆盖;

 

知道了这个状况后,我过早的优化了咱们的APP,把全部click事件替换成了tap事件,因此就有了这篇文章; 血的教训老是上线后才发生....

先上问题的截图

问题就是出在图中蓝色的删除按钮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的 事件绑定;

总结

上线前根本就没有想到会有这样的问题, 也没有刻意的去作这个测试, 其余的tap事件彻底没有问题, 教训就是没有遇到性能问题前, 切莫过早的优化. 原罪..