Pits encountered in ionic3 development

 Some bugs of tap event and click event in ionic3

 

Background: ionic3 plus angular4 development, the problem encountered after the click event uses tap;

First of all, there is a difference between the tap event and the click event on the mobile terminal. The document states that on the mobile terminal, the click event is delayed by 300ms than the tap event; the reason for this is that the mobile terminal triggers the tap event first, if 300ms After the finger is not touching, it is click. This setting is also understandable. Different from the desktop side, if you directly determine the click, then all touch events on the mobile side can no longer be triggered, and an overlay will occur;

 

After knowing this situation, I optimized our APP prematurely and replaced all click events with tap events, so I have this article; the lesson of blood always happens after it goes online....

Screenshot of the problem first

The problem is the blue delete button X in the picture. Clicking on the picture is to preview the picture, and clicking on the button is to delete the picture. Before optimization, it was a click event, no problem. After optimization, it was replaced by a tap event, and the delete button was Can't be triggered anymore. Only image preview is shown after click. Feels overwritten.

After modifying the event of the delete button to click, the problem is solved. 

<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>

This is the modified code, pay attention to the event binding of removeImage and addImage in the figure;

Summarize

I didn't think there would be such a problem before going online, and I didn't do this test deliberately. Other tap events are completely fine. The lesson is that you should not optimize prematurely before you encounter performance problems. The original sin..