我在绝对定位的div中的onmouseout函数遇到了麻烦。当鼠标击中div中的子元素时,mouseout事件发生,但我不希望它发生,直到鼠标离开父元素,绝对div。

我如何防止mouseout事件从发射时,它击中一个子元素没有jquery。

我知道这与事件冒泡有关,但我没有找到如何解决这个问题的方法。

我在这里找到了一个类似的帖子:如何禁用由子元素触发的鼠标退出事件?

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


当前回答

我只是想和你分享一些东西。 我在ng-mouseenter和ng-mouseleave事件中遇到了一些困难。

案例分析:

我创建了一个浮动导航菜单,当光标在图标上时切换。 这个菜单在每一页的最上面。

为了处理菜单上的显示/隐藏,我切换了一个类。 ng-class = " {: vm.isHover} " 切换vm。isHover,我使用ng鼠标事件。 ng-mouseenter = " vm。isHover = true" ng-mouseleave = " vm。isHover = false"

目前,一切都很好,并按预期工作。 解决方法简单明了。

接下来的问题是:

在一个特定的视图中,我有一个元素列表。 当光标在列表元素上时,我添加了一个操作面板。 我使用与上面相同的代码来处理该行为。

存在的问题:

我发现当我的光标在浮动导航菜单上,也在一个元素的顶部,有一个相互冲突。 动作面板显示,浮动导航被隐藏。

问题是,即使光标在浮动导航菜单上,列表元素ng-mouseenter也会被触发。 这对我来说毫无意义,因为我认为鼠标传播事件会自动中断。 我必须说我很失望,我花了一些时间来找出那个问题。

第一个想法:

我试着用这些:

$ event.stopPropagation () $ event.stopImmediatePropagation ()

我结合了很多ng指针事件(mouemove, mouveover,…),但没有一个帮助我。

CSS解决方案:

我用一个简单的css属性找到了解决方案,我越来越多地使用它:

pointer-events: none;

基本上,我这样使用它(在我的列表元素上):

ng-style="{'pointer-events': vm.isHover ? 'none' : ''}"

有了这个棘手的,ng-mouse事件将不再被触发,我的浮动导航菜单将不再关闭自己,当光标在它和列表中的一个元素上时。

更进一步说:

正如你所期望的,这个解决方案可行,但我不喜欢它。 我们无法控制事态发展,这很糟糕。 另外,你必须有访问虚拟机的权限。实现这个目标是有可能的,可能是不可能的,但在某种程度上是肮脏的。 如果有人想看的话,我可以做一把小提琴。

然而,我没有其他的解决方案…… 说来话长,我不能给你土豆,所以请原谅我的朋友。 不管怎样,指针事件:没有是生命,所以记住它。

其他回答

虽然你提到的解决方案使用jquery, Mouseenter和mouseleave是原生dom事件,所以你可以不使用jquery。

使用onmouseleave。

或者,在jQuery中使用mouseleave()

这正是你要找的东西。例子:

<div class="outer" onmouseleave="yourFunction()">
    <div class="inner">
    </div>
</div>

或者,在jQuery中:

$(".outer").mouseleave(function(){
    //your code here
});

这里有一个例子。

我检查原始元素的偏移量以获得元素边界的页面坐标,然后确保只有当鼠标退出超出这些边界时才触发鼠标退出操作。很脏,但很管用。

$(el).live('mouseout', function(event){
    while(checkPosition(this, event)){
        console.log("mouseovering including children")
    }
    console.log("moused out of the whole")
})

var checkPosition = function(el, event){
    var position = $(el).offset()
    var height = $(el).height()
    var width = $(el).width()
    if (event.pageY > position.top 
|| event.pageY < (position.top + height) 
|| event.pageX > position.left 
|| event.pageX < (position.left + width)){
    return true
}
}

感谢阿姆贾德·马萨德,他激励了我。

我有以下解决方案,似乎在IE9, FF和Chrome和代码很短(没有复杂的闭包和横向子东西):

    DIV.onmouseout=function(e){
        // check and loop relatedTarget.parentNode
        // ignore event triggered mouse overing any child element or leaving itself
        var obj=e.relatedTarget;
        while(obj!=null){
            if(obj==this){
                return;
            }
            obj=obj.parentNode;
        }
        // now perform the actual action you want to do only when mouse is leaving the DIV
    }

用onmouseleave代替onmouseout。

你还没有向我们展示你的具体代码,所以我不能在你的具体例子中告诉你如何做到这一点。

但是它很简单:用onmouseleave代替onmouseout。

就是这样:)所以,很简单:)

如果不知道怎么做,请参阅解释:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out

和平的蛋糕:)尽情享受吧。