两个div叠加触发事件发生闪烁问题
今天遇到一个问题,想实现一个功能:
当鼠标移到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="img/jixinjia-partner1.jpg" alt=""/></span>
<div class="div2">
<div class="box6"><img src="img/qr-code-bg1%20(1).jpg" alt="p"/></div>
<p>扫码有奖</p>
</div>
</div>
css部分:
.fudiv:hover .div2 {
display: block;
} .div2{
display: none;
}
原本jquery部分,这种方式会出现闪烁问题
<script>
$(document).ready(
function(){
$(".div1").mouseover(
function(e){
e.stopPropagation();
$(".div2").show();
}
);
$(".div1").mouseout(
function(e){
e.stopPropagation();
$(".div2").toggle();
}
);
}
);
</script>
两个div叠加触发事件发生闪烁问题的更多相关文章
- Web前端性能优化——高频触发事件的防抖
JS 提供了行为层的支持,为用户提供了交互的操作性. 然而,部分事件却常常有意无意的被频繁触发.比方浏览器窗体的 resize 事件.某个元素的 mouseover 事件,假设处理触发事件的回调函数过 ...
- JS让DIV绑定某个事件
<html> <head> <title>Add/Remove Event Handlers Example</title> <script ty ...
- [原创]实现多层DIV叠加的js事件穿透
Flash里面有个很好的特性是,一个容器里,不存在实际对象的部分,不会阻拦鼠标事件穿透到下一层. 前端就不一样了,两个div层叠以后,上层div会接收到所有事件(即使这个div里面内容是空的,没有任何 ...
- nodejs触发事件的两种方式
nodejs触发事件的两种方式: 方式之一:通过实例化events.EventEmitter //引入events模块 var events = require('events'); //初始化eve ...
- option触发事件两种方法总结
代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <tit ...
- jQuery-1.9.1源码分析系列(十) 事件系统——主动触发事件和模拟冒泡处理
发现一个小点,先前没有注意的 stopPropagation: function() { var e = this.originalEvent; ... if ( e.stopPropagation ...
- JS监听div的resize事件
原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- 页面加载完成后,触发事件——trigger()
<button id="btn">点击我</button> <div id="test"></div> 如果页面 ...
随机推荐
- angularjs checkbox 框的操作
前言:今天遇到一个问题,需要对多选按钮进行操作,作为js菜鸟,只能做自己慢慢琢磨了-- <label class="checkbox-inline custom-checkbox no ...
- iis发布后,未能找到编译器可执行文件 csc.exe
iis 未能找到编译器可执行文件 csc.exe在一台新安装完的Windows Server 2003上,打上Framework 3.5,配置好WebService的IIS,结果浏览时出现:未找到编译 ...
- java cef3 禁止右键菜单项
如下图所示,在context_menu_handler.cpp中ContextMenuHandler::OnBeforeContextMenu添加以下代码即可: ){ model->Clear( ...
- table表格在设置文字垂直居中后,在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行
table设置了垂直居中后在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行, 此时会导致table会把页面撑的很宽,导致表格后 ...
- Redhat、CentOS添加静态路由的标准方法
我们经常遇到需要在系统默认路由的基础上,额外添加静态路由的需求.为了使得下次系统启动这些静态路由依旧生效,我们可能采取在rc.loal里加入route命令追加静态路由的方法. 现在给大家推荐Redha ...
- HQL查询——HQL查询的基本用法
HQL查询--HQL查询的基本用法 1.HQL语法类似于SQL语法,但是需要注意的是,HQL是一种完全面向对象的查询语言.SQL语言操作的对象是数据表.列等数据库对象,而HQL语言的操作对象是类.实例 ...
- 数组栈的C语言实现
#ifndef _CONST_H_#define _CONST_H_ #include <stdio.h>#include <stdlib.h> typedef enum { ...
- 读《编写可维护的JavaScript》第八章总结
第八章 避免“空比较” 我们在对传进来的参数做处理之前,肯定需要验证一下是否是我们想要的,也就是说大多数情况下,我们需要对比一下它的类型. 作者首先给了一个看起来都感觉不对的代码: var Contr ...
- (转载)MongoingDB常用操作
mongo –path db.AddUser(username,password) 添加用户 db.auth(usrename,password) 设置数据库连接验证 db.cloneDat ...
- Windows下的Memcache安装
Windows下的Memcache安装: 1. 下载memcache的windows稳定版,解压放某个盘下面,比如在c:\memcached2. 在终端(也即cmd命令界面)下输入 'c:\memca ...