Not necessarily H5, even writing small programs will also have the penetration of click events
1. Problem Description:
- Scenario 1: Click the mask to penetrate the problem. Click the close button on the mask. After the mask disappears, the click event on the element below the button is triggered.
- Scenario 2: Cross-page click-through problem: If the button happens to be under an A tag with an href attribute, the page will jump.
- Scenario 3: Another cross-page click-through problem: this time there is no mask, click the button in the page directly to jump to the new page, and then find that the click event of the corresponding position element in the new page is triggered.
- Scenario 4: But the probability is very low, that is, the corresponding position element in the new page happens to be a label, and then the continuous jump occurs.
2. Solutions:
- Method 1: Write specification questions, don’t mix touch and click. Since 300ms after touch will trigger click, using only touch or just click will not be a problem.
- Method 2: Eat (or consume) the click after the touch, still use tap, but do extra processing in cases where a tap can penetrate, Take something to block it, or tap it and then wait 350 milliseconds to hide the mask, pointer-events, do the detection in the following element’s event handler (with global flag), etc.
3. Personal Advice:
Method 1 is recommended to make my writing more standard, so I use Tap event on mobile terminal.
If students who write small programs use Taro – UI, the click event in AtButton in Taro – UI is actually click event (including but not limited to AtButton). If they also use the Button click event of small programs, it will also occur the penetration problem. Because the native tap event of a small program is a tap event
4. Handling of special cases:
- Add @tap.stop= “search()” after the click event. Here is an example of VUE development, which can be adjusted for different programming.
- Add @tap= “search($event)” after click event
Link: blog.csdn.net/qq_38209578…