在没有jQuery的情况下悬停父绝对div的子元素时防止onmouseout

Question

我在使用绝对定位 div 中的 onmouseout 函数时遇到问题。当鼠标点击 div 中的子元素时，mouseout 事件会触发，但我不希望它在鼠标离开父级绝对 div 之前触发。

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

我知道这与事件冒泡有关，但我没有找到解决方法的运气。

我在这里找到了一个类似的帖子：How to disable mouseout events triggered by child elements?

但是该解决方案使用 jQuery。

Answer 1

使用onmouseleave。

或者，在 jQuery 中，使用 mouseleave()

这正是您正在寻找的东西。示例：

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

或者，在 jQuery 中：

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

一个例子是here。

Answer 2

对于在大多数情况下都有效的更简单的纯 CSS 解决方案，可以通过将子级的 pointer-events 设置为 none 来删除它们

.parent * {
     pointer-events: none;
}

浏览器支持：IE11+

Answer 3

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，请查看...

EDIT 跨浏览器支持的固定链接http://jsfiddle.net/RH3tA/9/

注意，这只检查直接父级，如果父级 div 有嵌套的子级，那么您必须以某种方式遍历父级元素以查找“原始元素”

EDIT 嵌套子级示例

编辑已修复，希望跨浏览器

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;
}

还有一个新的JSFiddle，编辑更新链接

Answer 4

这是一个基于以下内容的更优雅的解决方案。 它解释了从多个级别的孩子冒泡的事件。 它还解决了跨浏览器问题。

function onMouseOut(this, event) {
//this is the original element the event handler was assigned to
   var e = event.toElement || event.relatedTarget;

//check for all children levels (checking from bottom up)
while(e && e.parentNode && e.parentNode != window) {
    if (e.parentNode == this||  e == this) {
        if(e.preventDefault) e.preventDefault();
        return false;
    }
    e = e.parentNode;
}

//Do something u need here
}

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

Answer 5

使用 onmouseleave 代替 onmouseout。

您尚未向我们展示您的具体代码，因此我无法在您的具体示例中向您展示如何操作。

不过很简单：把onmouseout换成onmouseleave就行了。

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

如果不确定如何操作，请参阅以下说明：

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

平安无事 :) 尽情享受吧 :)

Answer 6

如果您使用 jQuery，您还可以使用“mouseleave”函数，它会为您处理所有这些。

$('#thetargetdiv').mouseenter(do_something);
$('#thetargetdiv').mouseleave(do_something_else);

do_something 会在鼠标进入targetdiv 或其任何子元素时触发，do_something_else 只会在鼠标离开targetdiv 及其任何子元素时触发。

Answer 7

感谢 Amjad Masad 启发了我。

我有以下似乎适用于 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
    }

Answer 8

我认为Quirksmode 有你需要的所有答案（不同的浏览器冒泡行为和 mouseenter/mouseleave 事件），但我认为该事件冒泡混乱的最常见结论是 使用 JQuery 或 Mootools 之类的框架（具有 mouseenter 和 mouseleave 事件，这正是您的直觉）。

看看他们是怎么做的，如果你愿意，可以自己做
或你可以create your custom Mootools 的“精益平均”版本，只有事件部分（及其依赖项）。

Answer 9

试试mouseleave()

例子：

<div id="parent" mouseleave="function">
   <div id="child">

   </div>
</div>

;)

Answer 10

我找到了一个非常简单的解决方案，

只使用 onmouseleave="myfunc()" 事件而不是 onmousout="myfunc()" 事件

在我的代码中它起作用了！！

示例：

<html>
<head>
<script type="text/javascript">
   function myFunc(){
      document.getElementById('hide_div').style.display = 'none';
   }
   function ShowFunc(){
      document.getElementById('hide_div').style.display = 'block';
   }
</script>
</head>
<body>
<div onmouseleave="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'>
   Hover mouse here
   <div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'>
      CHILD <br/> It doesn't fires if you hover mouse over this child_div
   </div>
</div>
<div id="hide_div" >TEXT</div>
<a href='#' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>

鼠标移出功能的相同示例：

<html>
<head>
<script type="text/javascript">
   function myFunc(){
      document.getElementById('hide_div').style.display = 'none';
   }
   function ShowFunc(){
      document.getElementById('hide_div').style.display = 'block';
   }
</script>
</head>
<body>
<div onmouseout="myFunc()" style='border:double;width:50%;height:50%;position:absolute;top:25%;left:25%;'>
   Hover mouse here
   <div id='child_div' style='border:solid;width:25%;height:25%;position:absolute;top:10%;left:10%;'>
      CHILD <br/> It fires if you hover mouse over this child_div
   </div>
</div>
<div id="hide_div">TEXT</div>
<a href='#' onclick="ShowFunc()">Show "TEXT"</a>
</body>
</html>

希望对你有帮助:)

Answer 11

虽然你提到的solution使用jquery， mouseenter 和 mouseleave 是原生 dom 事件，因此您可以不使用 jquery。

Answer 12

有两种方法可以解决这个问题。

1) 检查回调中的 event.target 结果，看看它是否与你的父 div 匹配

var g_ParentDiv;

function OnMouseOut(event) {
    if (event.target != g_ParentDiv) {
        return;
    }
    // handle mouse event here!
};


window.onload = function() {
    g_ParentDiv = document.getElementById("parentdiv");
    g_ParentDiv.onmouseout = OnMouseOut;
};

<div id="parentdiv">
    <img src="childimage.jpg" id="childimg" />
</div>

2) 或者使用事件捕获并在回调函数中调用 event.stopPropagation

var g_ParentDiv;

function OnMouseOut(event) {

    event.stopPropagation(); // don't let the event recurse into children

    // handle mouse event here!
};


window.onload = function() {
    g_ParentDiv = document.getElementById("parentdiv");
    g_ParentDiv.addEventListener("mouseout", OnMouseOut, true); // pass true to enable event capturing so parent gets event callback before children
};

<div id="parentdiv">
    <img src="childimage.jpg" id="childimg" />
</div>

Answer 13

我让它像一个魅力一样工作：

function HideLayer(theEvent){
 var MyDiv=document.getElementById('MyDiv');
 if(MyDiv==(!theEvent?window.event:theEvent.target)){
  MyDiv.style.display='none';
 }
}

啊，MyDiv标签是这样的：

<div id="MyDiv" onmouseout="JavaScript: HideLayer(event);">
 <!-- Here whatever divs, inputs, links, images, anything you want... -->
<div>

这样，当 onmouseout 转到孩子、孙子等时，style.display='none' 不会被执行；但是当 onmouseout 退出 MyDiv 时它会运行。

因此无需停止传播、使用计时器等...

感谢您提供的示例，我可以从中制作此代码。

希望这对某人有所帮助。

也可以这样改进：

function HideLayer(theLayer,theEvent){
 if(theLayer==(!theEvent?window.event:theEvent.target)){
  theLayer.style.display='none';
 }
}

然后是这样的DIVs标签：

<div onmouseout="JavaScript: HideLayer(this,event);">
 <!-- Here whatever divs, inputs, links, images, anything you want... -->
<div>

所以更通用，不仅是一个div，而且不需要在每一层上添加id="..."。

Answer 14

如果您可以在mouseout 方法中访问事件附加到的元素，则可以使用contains() 来查看event.relatedTarget 是否为子元素。

由于event.relatedTarget是鼠标传入的元素，如果不是子元素，则表示鼠标移出该元素。

div.onmouseout = function (event) {
    if (!div.contains(event.relatedTarget)) {
        // moused out of div
    }
}

Answer 15

在 Angular 5、6 和 7 上

<div (mouseout)="onMouseOut($event)"
     (mouseenter)="onMouseEnter($event)"></div>

然后

import {Component,Renderer2} from '@angular/core';
...
@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit, OnDestroy {
...
 public targetElement: HTMLElement;

 constructor(private _renderer: Renderer2) {
 }

 ngOnInit(): void {
 }

 ngOnDestroy(): void {
  //Maybe reset the targetElement
 }

 public onMouseEnter(event): void {
  this.targetElement = event.target || event.srcElement;
  console.log('Mouse Enter', this.targetElement);
 }

 public onMouseOut(event): void {
  const elementRelated = event.toElement || event.relatedTarget;
  if (this.targetElement.contains(elementRelated)) {
    return;
  }
  console.log('Mouse Out');
 }
}

Answer 16

我们可以简单地检查 e.relatedTarget 是否有子类，如果为真则返回函数。

    if ($(e.relatedTarget).hasClass("ctrl-btn")){
        return;
    }

这是为我工作的代码，我用于 html5 视频播放，暂停按钮切换悬停视频元素

element.on("mouseover mouseout", function(e) {

    if(e.type === "mouseout"){

        if ($(e.relatedTarget).hasClass("child-class")){
            return;
        }

    }

});

Answer 17

我检查原始元素的偏移量以获取元素边界的页面坐标，然后确保仅在 mouseout 超出这些边界时触发 mouseout 操作。很脏，但它可以工作。

$(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
}
}

Answer 18

var elem = $('#some-id');
elem.mouseover(function () {
   // Some code here
}).mouseout(function (event) {
   var e = event.toElement || event.relatedTarget;
   if (elem.has(e).length > 0) return;

   // Some code here
});

Answer 19

如果您向父元素添加（或拥有）一个 CSS 类或 id，那么您可以执行以下操作：

<div id="parent">
  <div>
  </div>
</div>

JavaScript:
document.getElementById("parent").onmouseout = function(e) {
  e = e ? e : window.event //For IE
  if(e.target.id == "parent") {
    //Do your stuff
  }
}

所以只有当事件在父 div 上时才会执行。

Answer 20

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

案例研究：

我创建了一个浮动导航菜单，当光标悬停在图标上时它会切换。
此菜单位于每一页的顶部。

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

目前，一切都很好，并且按预期工作。
解决方案干净简单。

传入问题：

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

问题：

我发现当我的光标在浮动导航菜单上以及元素顶部时，彼此之间存在冲突。
操作面板出现了，浮动导航被隐藏了。

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

初步想法：

我尝试使用这些：

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

我结合了很多 ng 指针事件（mousemove、mouveover、...），但没有一个能帮到我。

CSS 解决方案：

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

pointer-events: none;

基本上，我就是这样使用它的（在我的列表元素上）：

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

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

更进一步：

如您所料，此解决方案有效，但我不喜欢它。
我们无法控制自己的事件，这很糟糕。
另外，您必须有权访问 vm.isHover 范围才能实现这一目标，这可能是不可能的，但在某种程度上是肮脏的。
如果有人想看，我可以做一个小提琴。

不过，我没有其他解决方案...
说来话长，我不能给你一个土豆，所以请原谅我的朋友。
无论如何，pointer-events: none 就是生命，所以记住它。

Answer 21

有一种简单的方法可以让它工作。你设置的元素和所有的子类名一样，那么：

element.onmouseover = function(event){
 if (event.target.className == "name"){
 /*code*/
 }
}

Answer 22

对于 vanillajs，您也可以使用这种方式

document.querySelector('.product_items') && document.querySelector('.product_items').addEventListener('mouseleave', () => updateCart())


const updateCart = () => {
let total = 0;
document.querySelectorAll('input') && document.querySelectorAll('input').forEach(item => total += +item.value)
  document.getElementById('total').innerHTML = total
}

<div class="product_items">
  <div class="product_item">
    <div class="product_name">
    </div>
    <div class="multiply__btn">
      <button type="button">-</button>
      <input name="test" type="text">
      <button type="button">+</button>
    </div>
  </div>
  <div class="product_item">
    <div class="product_name">
    </div>
    <div class="multiply__btn">
      <button type="button">-</button>
      <input name="test" type="text">
      <button type="button">+</button>
    </div>
  </div>
  <div class="product_item">
    <div class="product_name">
    </div>
    <div class="multiply__btn">
      <button type="button">-</button>
      <input name="test" type="text">
      <button type="button">+</button>
    </div>
  </div>
</div>

<div id="total"></div>