Mobile page click through problem solution

Last Update:2016-05-12 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Mobile page click through problem solutionTime 2015-08-24 21:43:58 Dim Feather BreezeOriginalHttp://www.ayqy.net/blog/mobile page Click to penetrate the problem solution/Theme<span class="new-label" style="display:inline-block; padding:2px 4px; font-size:0.9em; line-height:16px; vertical-align:baseline; white-space:nowrap; color:rgb(120,120,120); margin-right:5px; background-color:rgb(242,242,242)"><span class="new-label" style="display:inline-block; padding:2px 4px; font-size:0.9em; line-height:16px; vertical-align:baseline; white-space:nowrap; color:rgb(120,120,120); margin-right:5px; background-color:rgb(242,242,242)">JavaScriptONE. Click and 300ms delayThe mobile browser provides a special feature: double tap to enlargeThe delay of 300ms comes from here, after the user touches the page, it takes a while to decide if it is a double tap action instead of an immediate response click, and the time to wait is about 300MS. There was a brief introduction: breeze: HTML5 Touch EventThe Move event provides<code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)"><code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)">touchstart</code></code>、<code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)"><code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)">touchmove</code></code>、<code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)"><code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)">touchend</code></code>Without tap support, The mainstream framework (library) implements custom tap events manually in order to eliminate 300MS latency and improve page response Times. For a simple page, you can put<code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)"><code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)">touchstart</code></code>Or<code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)"><code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)">touchend</code></code>Used as a tap, but there are some problems, such as the finger touch the target element, Press and hold, slowly move out of the response area, will trigger<code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)"><code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)">touchstart</code></code>Event execution corresponding to the event handler (this should not be triggered),<code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)"><code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,‘Courier New‘,monospace; border:none; background-color:rgb(247,247,249)">touchend</code></code>There are similar problems with Events.In addition, there is a click-through problem with native touch events , because click is triggered about 300ms after the touch series event, and mixing touch and click will definitely cause a point-through problem, which is described in detail belowTwo. Click through problemsThere are 3 types of Click-through Phenomena: <ul style="padding:0px; margin:0px 0px 0.75em 25px; list-style-type:none; line-height:1.7em"> <li style="line-height:1.7em; list-style-type:disc"><li style="line-height:1.7em; list-style-type:disc">Click to penetrate the Problem: click the Close button on the mask, the mask disappears after the Click event that triggered the element below the buttonThe Mask's Close button binds to the touch event, and the button below binds the click event, and after the touch event is triggered, the mask disappears, and the target of the Click event of the fire,event after 300ms is naturally the element below the Button. Because the button disappeared with the Mask.</li></li> <li style="line-height:1.7em; list-style-type:disc"><li style="line-height:1.7em; list-style-type:disc">Cross-page Click through problem: If the button below is exactly a tag with an href attribute, then the page will jumpBecause the a tag jumps by default is the Click event Trigger , so the principle is exactly the same as above</li></li> <li style="line-height:1.7em; list-style-type:disc"><li style="line-height:1.7em; list-style-type:disc">Another cross-page click through the problem: this time there is no mask, directly click on the page button to jump to the new page, and then found that the new page in the corresponding location element of the Click event is triggeredAnd the truth of the mask, JS control page Jump Logic if it is bound on the touch event, and the new page corresponding to the location of the element binding is the click event, and the page in 300ms to complete the jump, three conditions at the same time to meet, this is the case</li></li> </ul>Not to subdivide the words there is a fourth, but the probability is very low, is the new page corresponding to the location element is a tag, and then the occurrence of a continuous jump ... And all that, It's a click-through problem.Three. SolutionThe problem is clear, there are many solutions, but there are 2 ways of thinking: <ol style="padding:0px; margin:0px 0px 0.75em 25px; line-height:1.7em"> <ol style="padding:0px; margin:0px 0px 0.75em 25px; line-height:1.7em"> <li style="line-height:1.7em">Don't mix touch and clickSince touch 300ms triggers the click, only touch or just click will naturally have no problem.</li> <li style="line-height:1.7em">Eat (or Consume) the click after touchStill use tap, just in the case of possible click through the situation to do extra processing, take something to block, or tap delay after 350 milliseconds to hide mask, pointer-events, in the following element of the event handler for detection (with global Flag) and so on, can eat on the line</li> </ol> </ol>Detailed solution: <ol style="padding:0px; margin:0px 0px 0.75em 25px; line-height:1.7em"> <li style="line-height:1.7em"><li style="line-height:1.7em"> with touch only The simplest solution that perfectly solves the Click-through problem touchstart , ' touchend ', ' tap '), requires special attention to the a tag, A tag of the href is also click, you need to remove the jump to JS control, or directly to the span + tap control Jump. If the requirements are not high, do not care to slip or slip in to trigger events, span + touchend can be, after all, tap needs to introduce a Third-party library without a tag actually nothing, mobile app development does not consider seo, even with a tag, generally will remove all default styles, rather than directly with the span </li></li> <li style="line-height:1.7em"><li style="line-height:1.7em">Use only clickThe worst-case scenario , because of the 300ms delay, any custom interaction on the page will increase by 300 milliseconds delay, think all slowWithout touch there will be no touch 300ms trigger Click problem, If the interactivity is not high can do so, strongly not recommended , fast is always good</li></li> <li style="line-height:1.7em"><li style="line-height:1.7em">Get something to block it.It's a stupid way, don't use it.Leaves "chrysanthemum" dafa, For more information please see "research on mobile compatibility" JavaScript event mechanism (involving Mobile Compatibility)</li></li> <li style="line-height:1.7em"><li style="line-height:1.7em">tap delay 3 50ms again hides the mask minimal changes, The downside is that the hide mask slows down, and the 350ms can still feel the slow </li></li> <li style="line-height:1.7em"><li style="line-height:1.7em">pointer -events more troublesome and flawed, Not recommended mask after hiding, add < to the element below the button Code style= "padding:2px 4px; font-family:monaco,menlo,consolas, ' Courier New ', monospace; border:none; Background-color:rgb (247,247,249) ">pointer-events:none; style, Let click through the past, 350ms after the removal of this style, recovery response The flaw is that the mask disappears after the 350ms, the user can see the button below the element point is not responding, if the user is fast, you will find the </li></li> <li style="line-height:1.7em"><li style="line-height:1.7em"> What's in the following element (with Global Flag) more trouble , not recommended Global flag Record button click Position (coordinate point), in the following element of the event handler to determine the coordinates of the event, if the same is the hateful click, refused to respond to above is just the idea, not tested, it is not possible to use record time stamp judgment, waiting for 350ms, so and <code style=" padding:2px 4px; font-family:monaco,menlo,consolas, ' Courier New ', monospace; border:none; Background-color:rgb (247,247,249) ">pointer-events </code> almost </li></li> <li style="line-height:1.7em"><li style="line-height:1.7em">FastclickEasy to use solution, do not mind to load a few kb, not recommended , because someone encountered a bug, more information please see: Fastclick causes the Click event to fire two times the problemFirst introduce the Fastclick library, and then the page all the touch events are replaced by click, in fact, a little bit of trouble, it is recommended to introduce these several KB in order to solve the problem is not worth, instead of using the first method</li></li> </ol>Four. DEMOWrite a lot of test page, please check: [email protected] ayqy/my.jsResources <ul style="padding:0px; margin:0px 0px 0.75em 25px; list-style-type:none; line-height:1.7em"> <ul style="padding:0px; margin:0px 0px 0.75em 25px; list-style-type:none; line-height:1.7em"> <li style="line-height:1.7em; list-style-type:disc">Some of the seniors ' posts</li> </ul> </ul>Mobile page click through problem solution

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Mobile page click through problem solution

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support