Shulou(Shulou.com)06/02 Report--

This article shows you how to understand the penetration problems in the process of mobile web development. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

First, let's talk about the scene of the story. Take a chestnut as shown below:

An is the mask layer, B is the normal DOM,C is an element on B, here is the link. The scene is that A disappears when you click A, as a result, you hit C, and the page jumps, which is obviously not what we want.

Let's monitor click events:

Var div1 = document.getElementById ("div1"); var div2 = document.getElementById ('div2'); var con = document.getElementById (' console'); function handle (e) {var tar = e.target, eve = e.type; var ele = document.createElement ("p"); GE [XSS _ clean] = "target:" + tar.id + "event:" + eve; con.appendChild (ele); if (tar.id = = "div1") {div1.style.display = "none" }} div1.addEventListener ("touchend", handle); div1.addEventListener ("touchstart", handle)

As long as you don't click on C, everything is calm and there seems to be no problem. The sequence of events is as follows:

Target:div1 event:touchstart target:div2 event:touchend

But if you click An at C, you will find that the page jumps. In order to see this process more clearly, we bind the click event for B, that is, if B triggers the click event, then the click on An ends up on B. Add a line of code to the above javascript listing as follows:

Div2.addEventListener ('click',handle)

Click in area B and you can see the following in the log record console at the bottom of the page:

Target:div1 event:touchstarttarget:div1 event:touchendtarget:div2 event:click

It can be seen that after the div1 event is triggered, div2, that is, area B, miraculously captured the click event, when in fact we only clicked on div1. This is the "point through", fighting cattle across the mountain!

The scene in which the phenomenon of penetration occurs:

Just now, we gave an example to illustrate what Diantou is. In fact, the emergence scenarios of Diantou can be summarized as follows:

The upper and lower z axes of the two layers of A _ hand B overlap.

The upper A clicks and disappears or moves away. (this is important.)

The B element itself has a default click event (such as the a tag) or B binds the click event.

In the above case, click on the overlapping part of Adeband B, and there will be a bit of penetration.

Why is there a "point-through" phenomenon?

Instead of using click on the mobile side, the touch event is used instead of touch because there is a significant delay in the click event. The difference between touchstart and click is as follows:

Touchstart: on this DOM (or bubbling to this DOM), finger touch can be triggered immediately.

Click: the finger touch starts on this DOM (or bubbling to the DOM), and the finger does not move on the screen (some browsers allow you to move a very small displacement value), and the finger leaves the screen on this dom, and the interval between touching and leaving the screen is short (some browsers do not detect the interval time, but also trigger click).

In other words, the trigger time of events is in the order from morning to evening: touchstart is earlier than touchend and earlier than click. In other words, there is a delay in the trigger of click, which is about 300ms.

Because we have hidden the cover layer An in the touchstart phase, when click is triggered, the element that can be clicked is the B element under it. Because B binds the click event (or B itself defaults to the click event), the click event of B is triggered, resulting in a bit of transparency.

Solution

For the B element itself does not have a default click event (no a tag, etc.), we should unify the use of touch events, unified code style, and because the delay of click events on the mobile side is much larger, which is not conducive to the user experience, so about touch events should try to use touch-related events.

If there is a default click event in element B, the default click event in element A should be canceled in time to prevent the generation of click event. That is, the code should be added to the handle function in the above example as follows:

E.preventDefault (); the above content is how to understand the penetration problem in the process of mobile web development. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.