Mouseenter在鼠标滑上去不会对其子元素也发生监听,

Mouseover在鼠标滑上去会对其子元素发生监听.

所以对于事件的监听,我们要看需求,这里是对父元素的监听,不需要对子元素做监听.就用mouseenter与mouseleave.

mouseenter是不会对其里面的子元素做监听,所以我们对这个li做mouseenter和mouseleave的监听就是正确的.

带settimeout的mouseover事件

function add_color(b){
var x='#'+b;
var num = $(x).index();
//console.log(num);
$(x).addClass("lihover").siblings().removeClass("lihover");
if (num == 0) {
$(x).addClass('blue');
}
else if (num == 1) {
$(x).addClass('green');
}
else if (num == 2) {
$(x).addClass('orange');
}
} $(function() {
$("#topmenu li").mouseover(function () {
var id = $(this).attr("id");
timeout = setTimeout(function () {
add_color("" + id + "");
}, 400);
}).mouseout(function () {
clearTimeout(timeout);
$(this).removeClass();
});
});

分析:add_color是添加一个css样式的js函数.在鼠标移上去触发mouseover,400毫秒之后执行add_color的方法.这时在mouseout中添加clearTimeout的事件,这样如果没有到400毫秒之前就移出鼠标触发mouseout事件,那么就清除掉timeout,也就是不执行里面的那个add_color的方法,那么相应的css样式的效果也不会触发.这样类似就做到了鼠标悬停上达到400毫秒才会触发事件的错觉.而后面的那句

 $(this).removeClass();是针对触发了事件之后才移除css样式,逻辑上并不冲突.
并且鼠标快速滑过的时候,不会让这些css样式触发(这里的样式是出现一个带颜色悬浮层,如果频繁滑动,会导致颜色一致切换,给人一种花屏的错觉),从而阻止了闪屏的发生.

界面的悬浮层图例:


我的项目中:研究了一下,发现之前的mouseover和mouseout能够进入到悬浮层的原因,是因为li下的每个子元素都是连在一起的,没有settimeout的事件的时候,你在li里面滑动一下鼠标,(滑过的子元素)都会触发mouseover和mouseout的事件,但是由于没有延时效果,连在一起,频繁来回触发,就看不出有什么区别.所以在设置 settimeout之后,在cleartimeout(timeout)的事件中,他立马阻止了addcolor这个事件(显示悬浮层的事件)的发生.那么mouseover后就没有悬浮层的效果了.

setTimeout用于取消多次执行mouseover或者mouseenter事件,间接实现hover的悬停加载的效果.的更多相关文章

  1. scala的trait执行报错: 错误: 找不到或无法加载主类 cn.itcast.scala.`trait`

    scala的trait执行报错: 错误: 找不到或无法加载主类 cn.itcast.scala.`trait`.Children 原因:包名写成了trait,与trait关键字重名了: package ...

  2. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  3. C#动态编译代码,执行一个代码片段,或者从指定文件中加载某个接口的实现类

    在项目进行中有时候会需要配置一些复杂的表达式,在程序运行的时候执行表达式,根据结果执行相应的操作,简单写了一个类Expression,利用.net的动态编译技术实现,代码如下: public clas ...

  4. jQuery里的mouseover与mouseenter事件类型区别

    JQ里面有mouseover和mouseenter  2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...

  5. Linux0.11内核--加载可执行二进制文件之3.exec

    最后剩下最核心的函数do_execve了,由于这里为了简单起见我不分析shell命令的情况, /* * 'do_execve()'函数执行一个新程序. */ //// execve()系统中断调用函数 ...

  6. 浏览器中Javascript的加载和执行

    在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...

  7. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  8. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  9. js中页面加载完成后执行的几种方式及执行顺序

    1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式.两个是docu ...

随机推荐

  1. Windows下 VM12虚拟机安装OS X 10.11 和VM TOOLS

    Windows下虚拟机安装Mac OS X —– VMware Workstation12安装Mac OS X 10.11 本文即将介绍WIN虚拟MAC的教程.完整详细教程(包含安装中的一些问题) [ ...

  2. (转)apache和nginx的区别

    nginx 相对 apache 的优点: 轻量级,同样起web 服务,比apache 占用更少的内存及资源 抗并发,nginx 处理请求是异步非阻塞的,而apache 则是阻塞型的,在高并发下ngin ...

  3. js 根据不同情况引入不同操作

    1.根据分辨率不同引入不同的JS // 根据不同的分辨率引入不同的JS代码 <script> if (screen.width == 1440 && screen.heig ...

  4. php 面试题收集-基础题

    1.表单中 get与post提交方法的区别?答:get是发送请求HTTP协议通过url参数传递进行接收,而post是实体数据,可以通过表单提交大量信息. 2.session与cookie的区别?答:s ...

  5. Easyui 异步树的实现

    网上最多的onBeforeExpand 可用,因为后台代码没写对导致树形结构重复加载数据 前端代码: <%@ page language="java" contentType ...

  6. ElasticSearch集群配置

    因机器有限,本文只做单机3个节点的集群测试. 1.集群测试信息 elasticsearch版本:elasticsearch-2.4.1 windowns版本:win10 2.解压elasticsear ...

  7. java selenium (十四) 处理Iframe 中的元素

    有时候我们定位元素的时候,发现怎么都定位不了. 这时候你需要查一查你要定位的元素是否在iframe里面 阅读目录 什么是iframe iframe 就是HTML 中,用于网页嵌套网页的. 一个网页可以 ...

  8. VBA续嘘嘘

    什么是VBA?它有什么作用? A.实现Excel中没有实现的功能. B.提高运行速度. C.编写自定义函数. D.实现自动化功能. E.通过插入窗体做小型管理软件. VBA在哪里存放的?怎么运行? A ...

  9. Maven 排除第三方jar包所依赖的其他依赖

    单依赖过滤:可以过滤一个或者多个,如果过滤多个要写多个<exclusion>. <dependency> <groupId>org.apache.hbase< ...

  10. Hibernate2

    计应134(实验班) 杨伟 Hibernate 中提供了两级Cache(高速缓冲存储器),第一级别的缓存是Session级别的缓存,它是属于事务范围的缓存.这一级别的缓存由hibernate管理的,一 ...