`
dingjun1
  • 浏览: 214328 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

解决HTML内部元素的Mouse事件干扰

阅读更多
转载:http://www.cnblogs.com/xiaoshatian/archive/2008/03/28/1127377.html



解决HTML内部元素的Mouse事件干扰

话说有一个DIV元素,其内部有一个IMG元素和SPAN元素,不用理会这两个内部元素怎么布局,这不是我要讨论的重点。

为了实现一些特殊的效果,我需要利用TD的onmouseover和onmouseout事件,测试时就会发现如下的状况:

当鼠标移入DIV内部时,onmouseover事件被触发;接着再鼠标移动到DIV内部的IMG或者SPAN元素之上,我们肯定不会认为这时鼠标已经移到了DIV的外边,但奇怪的是onmouseout事件触发了,而且紧接着onmouseover事件也马上被触发了。

这可不是我想要的,那么怎么来“屏蔽”内部元素给外层元素带来的Javascript事件干扰呢?

这里列举两种方法:

一. setTimeout

因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后,外层元素的onmouseover也会马上触发,所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行,然后在onmouseover事件中再执行clearTimeout方法,这样就可以避免内部元素引起的事件干扰。

具体的执行过程请看下图(纵向的虚线表示时间):


这是个很巧妙的的方法,因为当onmouseout触发后,实质性的方法并没有马上执行,而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件,那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了,所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。



二.contains

在onmouseover时先进行如下判断,结果为true时再执行方法体:

if(!this.contains(event.fromElement)){MouseOverFunc()}

在onmouseout时先进行如下判断,结果为true时再执行方法体:

if(!this.contains(event.toElement)){MouseOutFunc()}

下面来解释一下上面两行代码的含义:

在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那我们就忽略这个事件。

event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素;event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。

那么上面两行代码的含义就分别是:

○ 当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件;

○ 当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件;

这样,内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。

但问题又来了,非IE的浏览器并不支持contains函数,不过既然我们已经知道了contains函数的作用,就可以自行添加如下的代码来为非IE浏览器增加contains支持:

if(typeof(HTMLElement) != "undefined")

{

HTMLElement.prototype.contains = function(obj)

{  

          while(obj != null &&  typeof(obj.tagName) != "undefind")  

          {

if(obj == this)

Return true;

Obj = obj.parentNode;

}   

return false;  

};  

}

分享到:
评论

相关推荐

    html5 canvas 画雷达图. 实现内部元素的click,mousemove,mouseout事件.

    在这个场景中,我们关注的是如何利用Canvas实现一个雷达图,并且为雷达图的内部元素添加click、mousemove和mouseout事件,增强用户交互体验。 首先,创建雷达图的基本步骤包括: 1. 获取Canvas元素:通过`document...

    javascript:onmouse事件大全

    "javascript:onmouse事件大全" javascript语言中提供了多种onmouse事件,可以根据实际情况选择合适的事件来实现网页特效。下面是javascript中常用的onmouse事件大全: 一般事件 * onClick:鼠标点击事件,多用在...

    一个不错的Mouseenter事件网页特效

    与传统的mouseover事件不同,mouseenter只会当鼠标指针首次进入元素边界时触发,不会因鼠标移动到子元素内部而再次触发。这使得Mouseenter在处理复杂的嵌套元素布局时更为精准,避免了不必要的重复触发。 ** ...

    WPF_MouseWheel事件实例

    在Windows Presentation Foundation(WPF)框架中,`MouseWheel`事件是用于处理鼠标滚轮操作的关键事件。这个事件允许开发者捕获用户通过鼠标滚轮进行的向上或向下的滚动动作,进而更新应用程序的界面或者执行特定的...

    onmouse常用事件js

    `onmouse`前缀的一系列事件通常与HTML元素关联,当发生特定的鼠标行为时,触发相应的事件处理函数。 二、`onmousedown`事件 `onmousedown`事件在用户按下鼠标按钮时触发。这个事件可以用于实现按钮的点击效果或拖放...

    鼠标经过子元素触发mouseout,mouseover事件的解决方案

    标题提到的问题是,当鼠标经过子元素时,意外触发了父元素的`mouseout`和`mouseover`事件,从而影响了预期的效果。下面将详细讨论这个问题以及解决方案。 首先,我们需要了解`mouseover`和`mouseout`事件的工作原理...

    mouse_event事件

    `mouse_event`事件是一组由鼠标触发的事件,包括但不限于鼠标移动(`MOUSE_MOVE`)、鼠标悬停(`MOUSE_OVER`)、鼠标按下(`MOUSE_DOWN`)、鼠标抬起(`MOUSE_UP`)、鼠标离开元素(`MOUSE_OUT`)、滚轮滚动(`MOUSE_WHEEL`)...

    C# 在 WebBrowse控件中捕获 MouseClick 或 MouseDown事件

    这有助于防止事件被多次处理,特别是当有多个元素可能响应同一鼠标事件时。 此外,还提到了`ContextMenuShowing`事件,它用于禁用右键菜单。在`htmlDoc_ContextMenuShowing`事件处理程序中,我们返回`false`以阻止...

    html5 svg 中元素点击事件添加方法

    这一点非常重要,因为SVG元素可以独立响应鼠标事件,如click、mouseover、mouseout等,而Canvas则必须依赖于Canvas本身进行事件捕获。 4. 在移动设备,特别是iPad上,可能需要确保SVG元素的点击事件正确地添加。有...

    javascript中mouseover、mouseout使用详解

    mouseenter事件只在鼠标指针进入元素内部时触发一次,而mouseleave事件则在鼠标指针离开元素时触发一次。这样就避免了事件冒泡带来的重复触发问题。 2. 在老版本浏览器中,可以使用JavaScript代码来判断事件的目标...

    JS浮动菜单是如何作出来的mouse事件

    ### JS浮动菜单实现原理与mouse事件详解 #### 浮动菜单概述 浮动菜单是一种常见的网页交互效果,当用户鼠标悬停在某个元素上时,会弹出一个包含额外信息或功能选项的小窗口或面板。这种设计可以提升用户体验,提供...

    为非IE浏览器添加mouseenter,mouseleave事件

    3. 对于`mouseout`事件,我们需要检查鼠标是否离开父元素本身,而不是其子元素。如果是,就触发`mouseleave`事件。 下面是一个简单的JavaScript代码示例,展示了如何在非IE浏览器上添加`mouseenter`和`mouseleave`...

    经过绑定元素时会多次触发mouseover和mouseout事件

    在JavaScript的事件处理中,`mouseover` 和 `mouseout` 是两个常见的鼠标事件,它们分别在鼠标指针进入和离开一个元素时触发。然而,当这些事件被绑定到一个包含子元素的父元素上时,问题就出现了:当鼠标在子元素...

    判断mouseenter事件鼠标从哪个方向进入

    在JavaScript和CSS的世界里,`mouseenter`事件是一个非常常见的交互元素,它会在鼠标指针进入某个元素时触发。然而,标准的`mouseenter`事件并不提供关于鼠标是从哪个方向进入元素的信息。要实现这个功能,我们需要...

    JS中mouseover和mouseout多次触发问题如何解决

    针对标题“JS中mouseover和mouseout多次触发问题如何解决”,主要内容探讨的是在JavaScript中使用jQuery库时,处理mouseover和mouseout事件由于事件冒泡导致的多次触发问题。当用户使用鼠标在页面元素间移动时,这些...

    阻止滚动条事件冒泡

    例如,如果我们在一个内部元素上监听`mousewheel`事件,可以这样做: ```javascript document.getElementById('myElement').addEventListener('mousewheel', function(event) { event.stopPropagation(); // 阻止...

    JavaScript和JQuery的鼠标mouse事件冒泡处理

    不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件 我们通过一个案例观察下问题: 给一个嵌套的层级绑定mouseout事件,会发现mouseout事件...

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

    了解上述基础知识后,文章具体分析了在div元素内部有子元素(如a标签)时,onmouseout事件误触发的问题,以及为何会产生这种现象。问题的根源在于IE和Firefox浏览器对事件冒泡处理方式的差异,以及两种浏览器对event...

    详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

    总结来说,解决Vue中在循环中使用`@mouseenter`和`@mouseleave`事件闪烁问题的关键是将事件绑定到父元素,而不是每个循环的子元素。通过调整事件处理逻辑和状态管理,我们可以有效地防止闪烁,提供更流畅的用户体验...

Global site tag (gtag.js) - Google Analytics