你的位置:首页 > 软件开发 > 网页设计 > 两个div叠加触发事件发生闪烁问题

两个div叠加触发事件发生闪烁问题

发布时间:2016-05-08 15:00:03
今天遇到一个问题,想实现一个功能:当鼠标移到div1上的时候,会出现div2。出现时div2在div1的上面,div2在出现后发生闪烁的问题。于是开始找问题根源,发现原来是因为当我们触发div1的时候,div2出现,但是div2是存在于div1上面的,所以当div2出现后,会又一 ...

今天遇到一个问题,想实现一个功能:

当鼠标移到div1上的时候,会出现div2。出现时div2在div1的上面,div2在出现后发生闪烁的问题。

于是开始找问题根源,发现原来是因为当我们触发div1的时候,div2出现,但是div2是存在于div1上面的,所以当div2出现后,会又一次触发下面div1的事件。通常我们可能给的事件是mouseover和mouseout,因为两个div叠加,div2出现时会多次触发div1的事件,所以就会发生闪烁问题。

解决:

1.一开始换mouseenter和mouseleave,但是发现还是一样的问题。

注:

mouseover()与mouseout()   表示鼠标移入和移出的时候触发,穿过子元素也会触发

 

mouseenter()和mouseleave()   表示鼠标穿过和穿出时候触发,穿过子元素不会触发

 

2.然后又添加e.stopPropagation();阻止冒泡和e.preventDefault();阻止默认事件,还是没有对症。

注:

e.stopPropagation();   //阻止冒泡之后,就不会形成冒泡向上传递了。

 

e.preventDefault();    //阻止默认行为

3.最后换为切换事件toggle切换事件也不顶事儿。

4.最终,如果想用js解决这个问题可能不容易,用js基本都会发生闪烁问题。那么我们使用css方式是不是可以解决呢?网上查了很多资料,发现也有很多人遇到这个问题,使用的是css中的hover来解决的。

具体使用方法:

给两个div的父元素,也就是共同包裹两个div的盒子一个hover,当父元素hover时,div2的样式设置为display:block;于是就顺利解决了这个问题,不会再出现闪烁问题。

下面上代码:

html部分:

 

<div class="fudiv">    <span class="div1"><img src='/images/loading.gif' data-original="img/jixinjia-partner1.jpg" /></span>    <div class="div2">         <div class="box6"><img src='/images/loading.gif' data-original="img/qr-code-bg1%20(1).jpg" /></div>         <p>扫码有奖</p>    </div></div>

原标题:两个div叠加触发事件发生闪烁问题

关键词:div

div
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。