当前位置: 首页 > 面试题库 >

当悬停父绝对div的子元素而没有jQuery时,防止onmouseout

耿炎彬
2023-03-14
问题内容

onmouseout在绝对位置div中的函数遇到麻烦。当鼠标点击div中的一个子元素时,将触发mouseout事件,但是我不希望它触发,直到鼠标不在父绝对div之外。

我如何防止mouseout事件在没有jquery的情况下击中子元素而触发。

我知道这与事件冒泡有关,但是我没有运气去寻找解决方法。

但是,该解决方案使用jQuery。


问题答案:
function onMouseOut(event) {
            //this is the original element the event handler was assigned to
            var e = event.toElement || event.relatedTarget;
            if (e.parentNode == this || e == this) {
               return;
            }
        alert('MouseOut');
        // handle mouse event here!
    }



    document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);

我制作了一个快速的JsFiddle演示,其中包含所有需要的CSS和HTML,请查看…

注意 ,这仅检查直接父级,如果父级div嵌套了子级,则您必须以某种方式遍历父级元素以寻找“原始元素”

*嵌套孩子的 *编辑 示例

编辑 固定为希望跨浏览器

function makeMouseOutFn(elem){
    var list = traverseChildren(elem);
    return function onMouseOut(event) {
        var e = event.toElement || event.relatedTarget;
        if (!!~list.indexOf(e)) {
            return;
        }
        alert('MouseOut');
        // handle mouse event here!
    };
}

//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener('mouseout',makeMouseOutFn(parent),true);

//quick and dirty DFS children traversal, 
function traverseChildren(elem){
    var children = [];
    var q = [];
    q.push(elem);
    while (q.length > 0) {
      var elem = q.pop();
      children.push(elem);
      pushAll(elem.children);
    }
    function pushAll(elemArray){
      for(var i=0; i < elemArray.length; i++) {
        q.push(elemArray[i]);
      }
    }
    return children;
}


 类似资料:
  • 问题内容: 首先,我假设对于CSS3来说这太复杂了,但是如果某个地方有解决方案,我很乐意使用它。 HTML非常简单。 子div设置为显示:无;默认情况下,但更改为display:block; 当鼠标悬停在父div上时。问题是此标记出现在我网站上的多个位置,并且我只希望在鼠标悬停在其父项上方时显示该子项,而不是在鼠标悬停在其他任何父项上时都显示该子项(它们都具有相同的类)名称和ID)。 我尝试使用并

  • 问题内容: 当我将鼠标悬停在DIV上时,它将触发将鼠标悬停在父DIV上,这对我来说似乎是错误的。我只希望“突出显示”效果在子DIV 上起作用。 问题答案: 根据定义,将鼠标悬停在孩子上,也将鼠标悬停在父母上。html事件中没有“阻止”。 有两个方法链,气泡和捕获。 W3C事件模型中发生的任何事件都首先被捕获,直到到达目标元素,然后再次冒泡。 http://www.quirksmode.org/js

  • 如果孩子在焦点中(已被点击),我怎么能失去父母的悬停状态?我有一个菜单箭头(用OPEN代替了它,以减少代码),它在悬停状态下打开我的菜单和菜单项,当我单击它们时,菜单项就会聚焦。在菜单项点击后,我希望能够失去对我父母的关注,这样菜单就会消失。 如果可能的话,我会尽量避免使用javascript,这是我最好的尝试... 这是我的html null null 编辑 我在一个单页应用程序上使用Angul

  • 问题内容: 如果我有标记: .a类具有与之关联的悬停类 .b类具有与之关联的伪元素…像这样: CSS是否有可能防止伪元素触发.a类悬停? 小提琴 问题答案: 以下CSS为现代浏览器(而非IE10-)提供了诀窍: 允许元素不接收悬停/点击事件。 警告 对非SVG元素的支持处于相对早期的状态。developer.mozilla.org给您以下警告: 在CSS中将指针事件用于非SVG元素是实验性的。 该

  • 所以我使用这个代码来显示菜单中的深度3元素(wordpress): 问题是,当我悬停在一个带有子菜单的元素上时,所有带有子菜单的元素都会显示出来。 问题是: 如何只显示一个子菜单,我在我的鼠标悬停的时刻? 很抱歉添加了标记,无法添加“jquery” 编辑: HTML:

  • 问题内容: 所以我有2个,彼此一样,像这样 我想改变的时候我悬停。 但是我希望悬停时再次恢复正常。 当我将鼠标悬停在深蓝色区域上时,我希望不是那么深蓝色的区域保持不是那么深蓝色,而不是变成白色。 我想保持这种结构。而且我不想要JavaScript解决方案(我知道JavaScript解决方案,但我想保留纯CSS)。 问题答案: .parent {