当一个容器,如div,不包含元素时。Onmouseover只执行一次,正常。当这个div包含其他子元素的时候,这个事件就被执行了多次,今天遇到了这个问题,特此记录下,解决方案。

这个是由于onmouseover引起的,主要是因为ul里面包含了子元素,会造出鼠标移动到子元素,比如li上面也会触发ul的onmouseover事件,造成了混乱。解决办法:

,如果是IE浏览器,用onmouseleave代替。

,不管什么浏览器,下面这个方法都是牛逼的,不信,你试试。

  1.  stateList.onmouseout = function(e){    
  2.   if( !e ) e = window.event;    
  3.   var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;    
  4.   while( reltg && reltg != this ) reltg = reltg.parentNode;    
  5.   if( reltg != this ){    
  6.       // è¿™é‡Œå¯ä»¥ç¼–写 onmouseleave äº‹ä»¶çš"å¤"理代码    
  7.     stateList.style.display='none';  
  8.  }  
  9. }  

原文在这里:http://blog.csdn.net/teresa502/article/details/6103458

Onmouseover被调用多次的更多相关文章

  1. JS事件 鼠标经过事件(onmouseover)鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序。

    鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...

  2. JS事件-让网页交互

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...

  3. JavaScript进阶知识点(慕课)

    JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等)  一. 数组 var myarray=n ...

  4. 二、JavaScript语言--JS基础--JavaScript进阶篇--事件响应

    1.什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户 ...

  5. 5、JavaScript进阶篇②——函数、事件、内置对象

    一.函数 1. 什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; a ...

  6. HTML第七天学习笔记

    今天主要是学习如何使用JS,第一个就是先是使用JS输出"Hello world" <!doctype html> <html lang="en" ...

  7. Unity3D脚本中文系列教程(十)

    http://dong2008hong.blog.163.com/blog/static/4696882720140312627682/?suggestedreading&wumii Unit ...

  8. Javascript进阶篇——( 事件响应)笔记整理

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 鼠标单击事件(on ...

  9. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

随机推荐

  1. Xperf Basics: Recording a Trace(转)

    http://randomascii.wordpress.com/2011/08/18/xperf-basics-recording-a-trace/   This post is obsolete ...

  2. 如何把excel数据导入数据库

    这里介绍2种把excel数据导入oracle数据库的方法. 1. 在excel中生成sql语句. 1)在数据列的右侧,第一行的任何位置输入="insert into table(xx,yyy ...

  3. memcache(一)概述

    概述 memcache是一种支持分布式的缓存系统,基于网络连接(当然它也可以使用localhost)方式完成服务,本身它是一个独立于应用的程序或守护进程(Daemon方式). 本地缓存 memcach ...

  4. [MFC] 如何更改MFC程序图标

    方法一: >_<:找一张ICO图标,替换programname/res/programname.ico文件,就可以啦,这时候你运行后得到的图标可能还是原来MFC的默认图标,这时候你只要把工 ...

  5. Backbone入门——开发第一个Backbone页面

    1. 功能描述在新建的html页面中,通过导入的backbone文件搭建一个简单的mvc结构.当用户进入该页时,id号为“divTip”的<div>元素中将显示“hello,backbon ...

  6. JavaScript中for..in循环陷阱介绍

    for...in循环中的循环计数器是字符串,而不是数字它包含当前属性的名称或当前数组元素的索引,下面有个不错的示例大家可以参考下   大家都知道在JavaScript中提供了两种方式迭代对象: (1) ...

  7. JavaScript、for循环语句知识巩固,while(){}语句以及do{}while()语句以及switch()语句

    一.for循环语句练习 关于for循环存在的两个问题类型 穷举:在不知道什么情况下才真的寻要我们的结果,自能让我们一个个走一遍. 迭代:在现有的条件根据规律不断求解,中间情况,最终推测出来的结果 1. ...

  8. 网站标题ico那些事

    浏览器打开一个网页都会有一个标题,用来显示当前页面的相关内容,如网站名称或者一篇文章的大标题,而定义它应该显示啥的话完全由HTML中title标签的内容决定. 如我们的大博客园:

  9. crossplatform---bower解决js的依赖管理

    从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...

  10. Atitit.人力资源管理原理与概论

    Atitit.人力资源管理原理与概论 1. 人力资源管理 第一章 人力资源管理概述 第二章 人力资源理论基础与发展演变 第三章 人力资源规划 第四章工作分析与工作设计 第五章 员工招聘与录用 第六章 ...