{*
Touch-Action: none; // Clear default gesture event
}
Elastic common code layout
the display: Flex;
Flex-direction: column;
The justify-Content: Center;
flex: 1;
flex-direction: column;
align-items: center;
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
user-scalable=no,
minimum-scale=1.0,
maximum-scale=1.0" />
device-width - the width of the device
initial-scale - the initial scale
minimum-scale - allows the user to scale the minimum scale
maximum-scale - allows the user to scale the ratio of the maximum
user-scalable - whether the user can manually scaling
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select:none;
Click penetration phenomenon, there are three??
* Click penetrating question:
Click the Close button on the (mask) mask layer,
the mask layer disappears discovery triggered the click event of the button the following elements
Mongolian layer close button is bound to touch events,
and button below element is bound to the click event,
after the touch event is triggered, Mongolia layer disappears, click event fire this point, after 300ms
event button below the target that is the natural element, because the buttons mask layer together with the news. ??
* Cross-page click penetrate event:
If the button below happens to be a href attribute of a tag,
then the page will jump the law of God, as a jump label is the default click event is triggered,
so exactly the same principle and above??
* Another cross-page click penetrating question:
this is not a mask, just click the button to jump to a new page within the page,
and then find the new page click the corresponding event is triggered and the position of the element layer of the same reason Mongolian,
JS control If the page jump logic is bound to touch events,
but also elements of the new page corresponding to the position of the binding is click event,
and completed the jump page within 300ms, three conditions are met,
it appears that the situation
Solution:
In the case (without a label, etc.) B elements themselves are not the default click events,
should be unified to use touch event, the Uniform Code style,
and because the click event in the mobile terminal of the delay to be much larger,
is not conducive to the user experience, so about touch events We should make full use of touch-related events.
click / tap
setTimeout mask
pointer-events：none;