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

mouseover、mouseout停止事件冒泡的解决方案

阅读更多
停止事件冒泡在各浏览器中已经有相应的解决方案,但是对于mouseover和mouseout却显得力不从心。
在IE里有onmouseleave和onmouseenter, 而对于要兼容各大浏览器的Web开发人员来说还是一件头疼的事。
虽然网上已经有针对Mozilla Firefox的一些计策,但代码量也是不容乐观的。
想寻求比较好的解决方案,于是就翻遍了国内的大小网站,终一无所获,不得不硬着头皮去读国外网站,结果是理想的,因为W3C里有relatedTarget,于是就有了下边的解决方案:
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);
}

在onmouseover和onmouseout里做如上判断。
分享到:
评论
6 楼 lxsgoodluck 2009-10-12  
其实此种方法是解决onmouseenter和onmouseleave的,上边的例子会很清晰,
向上的事件冒泡是可以通过e.stopPropagation();和e.cancelBubble = true;来解决的,
另外,在Table中此类问题会更突出,
只有实际遇到类似问题时才能很清楚的理解。
5 楼 lxsgoodluck 2009-10-12  
yangit11 写道
请问
“在onmouseover和onmouseout里做如上判断。 ”
这句怎么实践呢

onmouseover(){
//这里先调用?

/*
mouseover代码?
*/
}

另外调用时handle写什么呢?




先在IE中执行如下代码
<div style="border: 1px solid black; width: 350px;" onmouseout="var out = document.getElementById('out'); out.value = parseInt(out.value) + 1;" onmouseover="var over = document.getElementById('over'); over.value = parseInt(over.value) + 1;">
	Try moving the mouse in and out of this div
	<div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>
</div>
<p>
	mouseovers <input id="over" value="0">
	mouseouts <input id="out" value="0"><br>
</p>

<div style="border: 1px solid black; width: 350px;" onmouseleave="var leave = document.getElementById('leave'); leave.value = parseInt(leave.value) + 1;" onmouseenter="var enter = document.getElementById('enter'); enter.value = parseInt(enter.value) + 1;">
	Try moving the mouse in and out of this div
	<div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>
</div>
<p>
	mouseenters <input id="enter" value="0">
	mouseleaves <input id="leave" value="0"><br>
</p>


看到效果后理解onmouseover,onmouseout,onmouseenter,onmouseleave,以及为什么要寻求以上解决之道
然后再加入如下script:
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);  
}

将onmouseenter和onmouseleave部分换成
onmouseout="var leave = document.getElementById('leave'); if (isMouseLeaveOrEnter(event, this)) leave.value = parseInt(leave.value) + 1;" onmouseover="var enter = document.getElementById('enter'); if (isMouseLeaveOrEnter(event, this)) enter.value = parseInt(enter.value) + 1;"

在IE及Firefox里执行
4 楼 yangit11 2009-10-10  
请问
“在onmouseover和onmouseout里做如上判断。 ”
这句怎么实践呢

onmouseover(){
//这里先调用?

/*
mouseover代码?
*/
}

另外调用时handle写什么呢?
3 楼 lxsgoodluck 2009-04-08  
baoq 写道
jquery:
event.stopPropagation();

JQuery用的是e.stopPropagation();和e.cancelBubble = true;对onmouseover和onmouseout是不能解决问题的,微软造了个onmouseleave和onmouseenter,其它浏览器没有。
2 楼 baoq 2009-04-08  
jquery:
event.stopPropagation();
1 楼 playfish 2009-04-07  

嗯,非常好!!之前用jquery的实现有发现这个问题,但是没有去仔细寻找解决的方法,没想到楼主共享出来了. 很强大.

那些投新手贴的,真的遇到过处理事件冒泡的吗.

相关推荐

    javascript mouseover、mouseout停止事件冒泡的解决方案

    为了解决跨浏览器的`mouseover`和`mouseout`事件冒泡问题,开发者们采用了各种方法。例如,可以利用W3C标准中的`relatedTarget`属性来获取与事件相关的元素。`relatedTarget`属性在`mouseover`事件触发时指向鼠标...

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

    4. 解决方案实施:文章提出使用mouseenter和mouseleave来替换mouseover和mouseout,以此来解决触发问题。这样,当鼠标在id1和id2之间移动时,id2的显示和隐藏状态会按照预期执行,不会因为事件冒泡而出现意外的变化...

    javascript中mouseover、mouseout使用详解

    本文详细探讨了如何在不同浏览器中使用mouseover和mouseout,以及如何处理事件冒泡中的兼容性问题。 首先,传统方法使用mouseover和mouseout事件处理鼠标指针在元素之间移动时,存在一个事件冒泡的问题。在子元素上...

    基于mouseout和mouseover等类似事件的冒泡问题解决方法

    在本文中,我们将深入探讨`mouseout`和`mouseover`事件以及它们与事件冒泡相关的常见问题,同时提供一种有效的解决方案。 `mouseout`和`mouseover`事件是两种常用的DOM(文档对象模型)事件,用于追踪用户鼠标在...

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

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

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

    然而,当这些事件被绑定到一个包含子元素的父元素上时,问题就出现了:当鼠标在子元素之间移动时,会连续触发 `mouseover` 和 `mouseout` 事件,这被称为事件冒泡或捕获。这种行为可能会导致不必要的处理,甚至在...

    js下关于onmouseout、事件冒泡的问题经验小结.docx

    在上述代码中,当鼠标离开 `#div1` 时,会执行 `mouseout` 函数,并通过调用 `event.stopPropagation()` 来阻止事件继续向上冒泡。这样,只有在鼠标真正离开 `#div1` 时才会隐藏 `#div2`。 #### 四、总结 通过上述...

    原生js鼠标滑过跑到的按钮点击不到效果

    2. **鼠标滑过事件**:在JavaScript中,我们可以使用`mouseover`和`mouseout`事件来响应用户将鼠标光标移动到某个元素上方或离开该元素。`mouseover`触发时,光标进入元素或其子元素;`mouseout`则在光标离开元素...

    完美解决jQuery的hover事件在IE中不停闪动的问题

    通常,hover事件结合了mouseover和mouseout两个动作。然而,在旧版本的Internet Explorer(IE)浏览器中,使用hover事件时可能会遇到一个问题,即鼠标快速移动到触发下拉菜单时,菜单项会不停闪烁。这通常是由于...

    跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明

    mouseout事件会在鼠标移出子元素时冒泡到父元素,触发父元素的mouseout事件,而mouseleave则只在鼠标完全离开元素时触发,不考虑子元素的情况。 由于mouseenter和mouseleave在非IE浏览器中不被支持,我们需要使用...

    前端面试题(JavaScript).docx

    mouseenter 只在鼠标进入元素自身时触发,不包括子元素,对应的移除事件分别为 mouseout 和 mouseleave。 8. **JS 的 new 操作符**:new 关键字创建一个新对象,该对象的原型链指向构造函数的 prototype,并将新...

    jQuery 1.4.1 中文手册

    1.4.1版本中,`bind()` 还支持同时绑定多个事件类型,如 `bind("mouseover mouseout", function() {...})`。 **`live()` 方法** `live()` 方法允许动态添加的元素也能响应事件。它通过监听祖先元素的事件,然后...

    JavaScript集锦

    常见的事件有点击(click)、鼠标悬停(mouseover/mouseout)、键盘输入(keydown/keyup)等,通过添加和移除事件监听器来响应用户交互。 7. **闭包**:闭包是JavaScript中一种强大的特性,它可以访问其自身范围内...

    前端面试500题.rar

    3. **事件处理**:理解事件模型(捕获、冒泡)、事件对象、事件委托以及常用事件(click、mouseover、mouseout、keydown等)。 4. **AJAX与Fetch API**:掌握如何使用XMLHttpRequest或Fetch API进行异步请求,理解...

    锋利的JQuery 带书签有目录完整版源码分享

    3. **事件处理**:理解jQuery中的事件绑定,如`click()`, `mouseover()`, `mouseout()`等,并了解事件冒泡和事件委托的概念。 4. **动画效果**:掌握`fadeIn()`, `fadeOut()`, `slideToggle()`等动画方法,以及`...

    tablesorter+行高亮+列高亮

    这可以使用JavaScript事件监听器,比如`mouseover` 和 `mouseout` 来实现。当鼠标进入表格行时,添加高亮类,离开时移除。开发者可能需要创建一个CSS类,如`.highlight-row`,然后在JavaScript中动态地将这个类添加...

    50款原生js案例(绝美整合)

    12. **DOM事件**:深入研究`click`、`mouseover`、`mouseout`、`keydown`等常见DOM事件,以及自定义事件的触发和监听。 13. **类型转换**:理解JavaScript的弱类型特性,学习如何进行类型检查和转换。 14. **错误...

    最好的JavaScript中文参考手册

    - 事件:如click、mouseover、mouseout、keydown等,它们响应用户的操作。 - 事件处理程序:包括addEventListener和removeEventListener,支持多个事件处理函数。 - 事件冒泡与事件捕获:理解这两个概念对于正确...

Global site tag (gtag.js) - Google Analytics