mouseover和mouseout闪烁问题
在父级元素上注册了mouseover和mouseout事件后,当鼠标移动到子元素上时,会触发父级的mouseout和mouseover事件,反复触发,形成闪烁。
原因: 一种是由于冒泡,子级的mouseover和mouseout触发了父级的mouseover和mouseout,一种是不明原因,也会造成这个现象。
解决方法:
1. setTimeout,类似于debounce处理
$('div').mouseout(function(){
clearTimeout(t);
t=setTimeout(zoomIn,400);
}).mouseover(function(){
if(t!=null)clearTimeout(t);
t=null;
}
);
2.使用jquery的mouseenter和mouseleave代替,或者使用jquery的hover方法来处理。hover方法是对mouseenter和mouseleave的封装,而mouseenter和mouseleave则是对mouseover和mouseout的封装,进行了srcElement的判断,忽略子元素的行为。
mouseover和mouseout闪烁问题的更多相关文章
- jquery的mouseover和mouseout闪烁问题
$(document).ready(function(){ $(".anli").hover( function(){ var $div = $(this); t = setInt ...
- jQuery中mouseover和mouseout冒泡产生闪烁问题
问题:在jQuery中,对元素绑定mouseover和mouseout事件时,每次移入移出该元素和子元素时,都会触发事件,从而会出现闪动的现象. 原因:浏览器的冒泡行为. 解决方案: 使用mousee ...
- mouseover和mouseout多次触发解决方法(兼容ie和firefox)(转)
在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件,如导致菜单闪烁 ...
- mouseover,mouseout,mouseenter,mouseleave的区别
相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签 ...
- 鼠标 mouseover和mouseout事件
在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }). ...
- mouseover和mouseout、mouseenter和mouseleave
又一个傻傻分不清楚的东东~ 现实真是一个问题天天有的世界~本以为我对js中的事件还是比较了解的,对于早就接触的mouse事件,更是觉得得心应手了~但是现实却给了我一记重拳! 我自身工作中遇到的犯二的故 ...
- mouseover、mouseout,mouseenter、mouseleave区别
心情压抑的一天,我想好好的. mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseen ...
- mouseenter(fn)和mouseleave、mouseover和mouseout的的区别
$('.box1').mouseenter(function(){//穿入事件mouseenter $(this).css('background','red'); }).mouseleave(fun ...
- hover和mouseover,mouseout的区别
说道hover和mouseover,mouseout的区别,不得不联系到mouseenter,mouseleave. mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触 ...
随机推荐
- GeoServer 常见问题总结
Geoserver安装环境 Geoserver在部署发布服务时,经常会遇到如下问题,现总结如下: 1.忘记了GeoServer Web Admin Page的登陆用户名和密码怎么办? 存储位置:C:\ ...
- MSMQ消息队列安装
一.Windows 7安装.管理消息队列1.安装消息队列 执行用户必须要有本地 Administrators 组中的成员身份,或等效身份. 具体步骤: 开始—>控制面板—>程 ...
- DropDownList中显示无限级树形结构
效果图: 数据库表: DirID:目录的ID,ParentID:目录的父路径ID,Name:目录的名字主要代码: using System;using System.Collections;using ...
- python大数据工作流程
本文作者:hhh5460 大数据分析,内存不够用怎么办? 当然,你可以升级你的电脑为超级电脑. 另外,你也可以采用硬盘操作. 本文示范了硬盘操作的一种可能的方式. 本文基于:win10(64) + p ...
- Activiti系列: 如何给内置表单添加字段类型
对于内置的表单,除了原来支持的几种数据类型(string, long, enum, date, boolean, collection)之外,还可以自定义数据类型,比如增加一个javascript数 ...
- [CareerCup] 1.6 Rotate Image 翻转图像
1.6 Given an image represented by an NxN matrix, where each pixel in the image is 4 bytes, write a m ...
- vector 内存释放问题
关于容器的处理,只是拿来用,理解不深,但是今天跑程序出了问题.释放空间未得到真正的释放.于是网上找了一些文章,解决的问题. 解决方法:使用swap 加上clear,一起释放空间. 原理:即先创建一个临 ...
- HoloLens开发手记 - Unity之摄像头篇
当你穿戴好HoloLens后,你就会处在全息应用世界的中心.当你的项目开启了"Virtual Reality Support"选项并选中了"Windows Hologra ...
- Html中metra的含义
from: http://dev.csdn.net/article/60/60902.shtm meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head&g ...
- Thrift搭建分布式微服务(二)
第二篇 连接池 连接池配置,请前往Thrift搭建分布式微服务(一) 下面要介绍的其实不是单一的连接池,应该说是连接池集合.因为它要管理多个Tcp Socket连接节点,每个服务节点都有设置了自己 ...