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事件徹底沒有問題, 教訓就是沒有遇到性能問題前, 切莫過早的優化. 原罪..