Your location:Tech News>News>Script>Solution flicker problem of two superimposed div trigger event occurs

Latest News

Solution flicker problem of two superimposed div trigger event occurs

Author:fsadmin

Views:

  When the mouse over div1, there will be div2.div2 on top of div1, div2 flicker problem occurs when the event occurs.

  So start looking for the root of the problem and found that because when we div1 the trigger, div2 appear, but div2 is present in div1 above, so when div2 appears, will again trigger the following events div1.Usually we can give the event is mouseover and mouseout, because two div overlay, will trigger several times when div1 div2 event occurs, it will occur flicker problem.

  solve:

  1.Mouseenter beginning to change and mouseleave, but still found the same problem.

  Note:

  mouseover () and mouseout () indicate when the mouse moves in and out of the trigger, through the sub-elements will trigger

  mouseenter () and mouseleave () signifies a mouse through the trigger and out of time, through the sub-elements will not trigger

  2.Then add e.the stopPropagation (); e and prevents bubbling.preventDefault (); to prevent the default event, or not symptomatic.

  Note:

  e.stopPropagation (); // stop after bubbling, not formed transferred upward bubble.

  e.preventDefault (); // prevent the default behavior

  3.The last change to switch the event toggle switch event is not the top thing.

  4.Finally, if you want to solve this problem js it may not be easy, with basic js will flicker problems.Then we use css is not the way to solve it?Online search a lot of information and found that there are a lot of people encounter this problem, using the hover css solved.

  Specific use:

  Two div to parent element, which is the common two div boxes wrapped in a hover, when the parent element hover, div2 the style is set to display: block; so he successfully solved the problem, no longer flicker problem.

  On the following codes:

  html part:

  XML / HTML Code copied to the clipboard

  

  

  

  

  

Scan code prizes

  

  

  css section:

  CSS Code copied to the clipboard

  .fudiv: hover .div2 {

  display: block;

  }

  .div2 {

  display: none;

  }

  Originally jquery part, this approach will flicker problem

  JavaScript Code copy the contents to the clipboard

  

  This superposition of two or more div solutions flicker trigger event is the small series to share the entire contents of everyone, and I hope to give you a reference, I hope you will support script Home.

  Original Address: http: // www.cnblogs.com / hanyining / p / 5470581.html

Recommend article

Relate article