`
erricwang
  • 浏览: 13072 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

关于mouseover和mouseout的子元素触发问题

阅读更多
先标记一下,回头补全。

这里要用到event对象的一个属性relatedTarget,这个属性就是用来判断mouseover和mouseout事件目标节点的相关节点的属性,是不是有点绕,简单的来说就是当触发mouseover事件时,relatedTarget属性代表的就是鼠标刚刚离开的那个节点,当触发 mouseout事件时它代表的是鼠标移向的那个对象。当然MSIE它又不支持这个属性了:-P,不过它有代替的属性,分别是fromElement和 toElement,是不是有点累赘,不过我忍了,通过字面的意思大家应该很清楚这两个属性的意义,这里就不多解释,要是不清楚大家可以到网上搜一下相关的资料。

  function contains(parentNode,childNode){  
   return parentNode.contains ? parentNode != childNode && parentNode.contains(childNode) : !!(parentNode.compareDocumentPosition(childNode) & 16);  
   }  


关于那个16:
先看这里:http://blog.csdn.net/huajian2008/archive/2009/03/05/3960343.aspx

引用
在判断一个节点是否是另一个节点的祖先时
发现有compareDocumentPosition这么个函数
程序里的写法是:return !!(p.compareDocumentPosition(c) & 16);
开始对为什么要&上个16感到奇怪
因为以前没有用过compareDocumentPosition
所以也不知道它返回的值是什么
经过查询资料
以及测试
总结了下compareDocumentPosition返回值的结果
这个方法是用来判断一个节点是另一个节点的后代(10-01010)还是祖先(20-),在前面(4-00100)还是后面(2-0),同一节点为0(00000)
五位的二进制的各个位置表示不同的值:
第五位:祖先
第四位:后代
第三位:前面
第二位:后面
第一位:本身
相匹配的值为1,反之为0
这样对应五种情况,值分别是:10100(20), 01010(10), 00100(4), 00010(2), 00000(0)
即然知道了这些值
前面为什么要&上16
就一目了然了
只有第五位为1的时候,才会返回True,证明一个节点是另一个节点的祖先.
另外提一点,这个函数在IE中不支持,但文档上却写在在FF中原本为4的结果,在IE中为2,没看明白是怎么回事.


最后代码:
$e('.popbox').each(function (el){
    addEvent(el,'mouseout',function(evt,el){
//        console.log($q.event.getTarget(evt)==el,'$q.event.getTarget(evt)==el');
//        console.log(evt,'evt');
//        console.log(el,'el');
//        console.log($q.event.getTarget(evt),'$q.event.getTarget(evt)');
//        var tx =  evt.target || evt.srcElement;
//        console.log(tx,'tx');
        var reltg = (evt.relatedTarget) ? evt.relatedTarget : evt.toElement;
//        console.log(reltg,'reltg');
        
        var _ic = el.contains ? el != reltg && el.contains(reltg) : !!(el.compareDocumentPosition(reltg) & 16); 
//        console.log(_ic,'_ic');
        
        if(!_ic){
            $e(el).hide();
        }
    },[el]);
});


应用:http://act.vip.qq.com/privilege/templates/201002/
分享到:
评论

相关推荐

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

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

    javascript中mouseover、mouseout使用详解

    在JavaScript中,mouseover和mouseout事件是常用的事件,它们分别在鼠标指针进入和离开指定元素时触发。在事件处理中,区分鼠标指针是从子元素移入还是从父元素移出对于正确地触发相应的事件非常关键。本文详细探讨...

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

    总结来说,当面临因嵌套元素导致的 `mouseover` 和 `mouseout` 事件频繁触发的问题时,可以考虑使用jQuery的 `mouseenter` 和 `mouseleave` 或 `hover()` 方法来优化代码,提高用户体验。同时,为了确保在边界情况下...

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

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

    关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    最近在做的在线考试和课程商城都遇到这样的问题:就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,解决这个现象的办法有许多,不过我觉得有一种是最简单...

    jQuery中hover与mouseover和mouseout的区别分析

    在实际开发中,mouseover和mouseout事件很容易因为子元素的嵌套而导致事件处理函数被频繁触发。举个例子,当一个父元素内嵌套有多个子元素时,鼠标在子元素间移动会引发多次mouseover和mouseout事件,这在多数情况下...

    扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁

    在我们对一个dom添加mouseover和mouseout时,也就是jquery的hover事件,如果该dom有子元素,鼠标移到子元素时会触发mouseout事件,但往往实际情况我们希望在子元素上不触发out事件

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

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

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

    在`mouseout`和`mouseover`事件中,如果一个元素包含其他子元素,当鼠标从子元素移出到父元素时,会先触发子元素的`mouseout`,然后才触发父元素的`mouseout`。这可能导致不期望的行为,比如在上面提到的例子中,...

    实例讲解jquery中mouseleave和mouseout的区别

    这意味着,当你在父元素内有子元素的情况下,仅仅是在子元素上移动鼠标,实际上也会触发出mouseout事件,导致父元素的事件处理器执行相应的动作。在上文提供的内容中,当鼠标移动到下拉框#list的内部时,mouseout...

    IE中鼠标经过option触发mouseout的解决方法

    当鼠标从一个元素移动到另一个元素(包括其子元素)时,`mouseout`事件通常不会被触发。然而,在IE浏览器中,这个行为在处理`<select>`元素和其子`<option>`元素时有所不同。 问题在于,当用户在`<select>`下拉列表...

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

    `mouseover`和`mouseout`在鼠标进入或离开元素及其子元素时都会触发,而`mouseenter`和`mouseleave`只在鼠标进入或离开元素本身时触发,不包括其子元素。这在处理复杂的布局或多层次的交互时特别有用,因为它可以...

    9个鼠标触发事件

    `mouseout` 事件 - **定义**:当鼠标指针从一个元素移出到另一个元素时触发。 - **用途**:与 `mouseover` 相配合,实现元素间的交互逻辑。 - **特点**: - 不支持键盘触发。 - 可以冒泡。 - 若目标元素为源元素...

    jquery常用方法及使用示例汇总

    当鼠标进入/离开某个元素或它的后代元素时触发mouseover/mouseout事件。 mouseover事件大多数时候会与 mouseout 事件一起使用。 mouseover/mouserout事件由于冒泡机制,经常在不需要的时候不小心触发,从而导致一些...

    jqurey鼠标经过例子

    同时,为了提高用户体验,可以使用`mouseleave`事件替代`mouseout`,因为`mouseleave`只会在鼠标离开元素本身时触发,而不是其子元素。 总结,通过jQuery的`mouseover`和`mouseout`事件,我们可以轻松实现各种动态...

Global site tag (gtag.js) - Google Analytics