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

How to solve the flicker problem of two div superimposed trigger events, I believe that many inexperienced people do not know what to do about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

When the mouse moves over the div1, the div2 appears. The div2 is on top of the div1 when it appears, and the div2 flashes after it appears.

So we started to look for the root cause of the problem and found that it was because when we triggered div1, div2 appeared, but div2 existed on div1, so when div2 appeared, it triggered the following div1 event again. Usually, the events we may give are mouseover and mouseout, because the two div are superimposed, and the div1 event will be triggered multiple times when the div2 occurs, so the flicker problem will occur.

Resolve:

1. At first, I changed mouseenter and mouseleave, but I found the same problem.

Note:

Mouseover () and mouseout () indicate that the mouse is triggered when the mouse is moved in and out, and when passing through child elements.

Mouseenter () and mouseleave () indicate that the mouse is triggered when passing through and out, but not when passing through child elements.

two。 Then add e.stopPropagation (); prevent bubbling and e.preventDefault (); block the default event, still not symptomatic.

Note:

After e.stopPropagation (); / / stops bubbling, it will not form bubbles and pass upward.

E.preventDefault (); / / block default behavior

3. Finally, switching events to toggle switching events is not a good thing.

4. In the end, if you want to solve this problem with js, it may not be easy, and flickering problems will occur almost always with js. So can we solve it by using css? After looking up a lot of information on the Internet, I found that many people also encountered this problem and used hover in css to solve it.

Specific usage:

Give the parent element of two div, that is, the box that wraps the two div together, a hover, and when the parent element hover, the style of div2 is set to display:block;, so the problem is solved smoothly, and there will be no flicker problem.

The following is the code:

Html section:

XML/HTML Code copies content to the clipboard

There is a prize for scanning code.

Css section:

CSS Code copies content to the clipboard

.fudiv: hover .div2 {display: block;} .div2 {display: none } in the original jquery section, there will be a flicker problem with JavaScript Code copying the content to the clipboard $(document). Ready (function () {$(".div1"). Mouseover (function (e) {e.stopPropagation ()) $(".div2") .show ();}); $(".div1") .mouseout (function (e) {e.stopPropagation () $(".div2"). Toggle ();}). After reading the above, do you know how to solve the problem of flickering of two div superimposed trigger events? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.