`
FAvril
  • 浏览: 8205 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

ie6下js的onmouseover和onmouseout事件连续触发问题的解决方法

阅读更多
又一具ie6下的js问题。就是当一个标签包含子标签时,鼠标从父标签移动到子标签会连续触发父标签及子标签的onmouseover和onmouseout事件。又是从万能的百度上找了以下方法解决,特转!
function isMouseLeaveOrEnter(e, handler) {   
               
            if (e.type != 'mouseout' && e.type != 'mouseover') return false;            
            var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;           
            while (reltg && reltg != handler)                  
            {reltg = reltg.parentNode;  }            
            return (reltg != handler);        
        }


主要就是上面这个方法,核心在于使用前先判定一下鼠标移出前的标签是否父标签。
使用时只需要加个判断(无论移出或移入):
function setVisible(e,col){
            if(isMouseLeaveOrEnter(e, col)){
                col.childNodes[2].style.visibility = "visible";
            }
        }

 function setInvisible(e, col){
            if(isMouseLeaveOrEnter(e, col)){
                col.childNodes[0].style.background = "#000";
                col.childNodes[2].style.visibility = "hidden";
            }
        }


在编程中还发现了一个问题,例如有这样一种标签结构:
<ul>
  <li><a></a></li>
  <li><a></a></li>
</ul>
原先的预期是鼠标移到ul上时li里的子菜单内容出现
虽然使用了以上方法,但当鼠标移到第二个li时,菜单又消失了。
搞了一个晚上,最后才发现了css设置的问题,需要将a的width设置到100%,让它充满整个li才不会突然跳出。
分享到:
评论

相关推荐

    兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

    在本篇文章中,我们将探讨如何使用CSS和JavaScript来实现兼容IE和Firefox的鼠标经过效果(onmouseover和onmouseout)。在前端开发中,鼠标经过效果是一个非常常用的交互效果,然而不同的浏览器对其支持的方式不同,...

    js触发事件大全

    JavaScript 是一种广泛用于网页和网络应用的脚本语言,它在网页交互中扮演着重要角色,其中事件处理是其核心功能之一。事件是用户或浏览器对页面进行操作时触发的特定情况,例如点击按钮、滚动页面等。本文将详细...

    onmouseover和onmouseout的一些问题思考

    本文将深入探讨两个常见的鼠标事件:`onmouseover`和`onmouseout`,以及它们在不同浏览器中的行为差异,以及如何解决由此引发的问题。 `onmouseover`事件会在鼠标指针进入一个元素时触发,包括进入该元素的任何子...

    兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现–简短版

    本篇文章将探讨如何实现一个简短的兼容IE和Firefox的鼠标经过事件(onmouseover和onmouseout)的解决方案。 首先,让我们了解这两个事件。`onmouseover`事件在鼠标指针进入一个元素时触发,而`onmouseout`事件则在...

    图片模糊化,支持FF/IE6以上

    - IE6并不支持CSS3,所以实现模糊效果可能需要用到像CSS Expression或者JavaScript的onMouseOver/onMouseOut事件来动态修改图片的样式。 3. onMouseOver与onMouseOut事件: - `onMouseOver`事件在鼠标指针进入...

    JS图片预览(兼容IE6、IE7、IE8和FF)

    在JavaScript(简称JS)中实现图片预览,尤其是在兼容老版本的Internet Explorer(如IE6、IE7、IE8)以及Firefox(FF)等浏览器上,需要考虑多种技术策略和兼容性问题。下面我们将详细讨论如何实现这个功能,并着重...

    javascript onmouseout 解决办法.docx

    这种方法通过自定义 `mouseleave` 事件处理器来解决 `onmouseout` 事件过度触发的问题。其核心思想是在 `onmouseout` 事件触发时检查目标元素与鼠标移入的新元素之间的关系,只有当鼠标移入的元素不是目标元素的后代...

    javascript中onmouse事件在div中失效问题的解决方法

    本文探讨了在使用JavaScript处理鼠标事件时,在div元素中可能会遇到的onmouseout事件失效的问题,并提供了兼容IE和Firefox两种浏览器的解决方案。在探讨之前,需要了解几个基础知识点: 1. JavaScript事件冒泡:当...

    javascript鼠标事件大全

    在JavaScript编程中,鼠标事件是非常重要的交互元素之一,它们允许开发者捕捉用户的鼠标动作,并根据这些动作触发相应的脚本处理。本文将详细介绍JavaScript中的各种鼠标事件及其特性,包括支持的浏览器版本等内容。...

    JS鼠标键盘触发函数大全

    ### JS鼠标键盘触发函数大全知识点解析 #### 一、鼠标事件 鼠标事件是JavaScript中最常见的交互方式之一,它们主要用于响应用户的鼠标操作。 - **`onClick`**:当用户单击鼠标左键时触发。该事件通常用于处理点击...

    javascript解决IE6下hover问题的方法

    在JavaScript代码中使用了attachEvent方法,这是因为IE6仅支持attachEvent用于添加事件监听器,而不支持标准的addEventListener方法。同时,代码中也使用了正则表达式来清理类名,确保在移除"stest"时不会影响到元素...

    JavaScript程序设计——事件处理实验报告.docx

    - **鼠标事件**:如`onclick`(点击)、`onmousedown`(鼠标按下)、`onmouseup`(鼠标释放)、`onmousemove`(鼠标移动)、`onmouseout`(鼠标离开元素)和`onmouseover`(鼠标进入元素)。 - **Event对象**:...

    js事件总结

    onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按...

    JS中包涵的事件分类

    为了更好地理解和应用JS事件,本文将详细介绍JS中的各种事件及其应用场景。 #### 1. 鼠标事件 (Mouse Events) 鼠标事件是用户与网页交互时最常见的一类事件。它们主要涉及鼠标的各种操作,如点击、移动等。 - **...

    js事件大全汇总111

    本文档汇总了广泛使用的JavaScript事件及其触发条件,并提供了详细的解释,帮助开发者更好地理解和应用这些事件。 #### 二、鼠标事件 1. **`onClick`**:当用户点击一个元素时触发。 - 支持版本:IE3 | Netscape2...

    JS事件大全

    ### JS事件大全:深入解析与兼容性探讨 在前端开发领域,JavaScript事件处理是构建交互式用户界面的核心技术之一。本文旨在全面解析JavaScript中的各种事件类型及其对应的浏览器兼容性,帮助开发者更好地理解和应用...

    js鼠标事件大全(事件说明)

    ### JS鼠标事件大全详解 JavaScript 是一种广泛应用于网页开发中的脚本语言,它能够通过处理各种事件来增强页面的交互性。其中,鼠标事件是非常重要的一部分,它们允许开发者响应用户的鼠标操作,比如点击、移动等...

    JavaScript每天必学之事件

    在JavaScript中,事件处理程序一般以“on”开头,如onclick、onmouseover、onmouseout等。事件处理程序的命名约定帮助开发者快速识别出哪个函数负责处理哪种类型的事件。 接下来,我们来理解什么是事件冒泡和捕获。...

    Javascript鼠标事件大全

    3. **onMouseDown(按下事件)**: - **描述**:当鼠标按钮被按下时触发。 - **示例用途**:可以用于实现拖拽功能。 - **兼容性**:IE4及以上版本、Netscape4及以上版本、Opera支持。 4. **onMouseUp(抬起事件...

Global site tag (gtag.js) - Google Analytics