javascript – 为什么在对子元素执行mousein时会触发mouseout？

2019-07-27 10:34:25 阅读：494 来源： 互联网

标签：html javascript jquery javascript-events mouseevent

mouseout事件from MDN的定义如下：

The mouseout event is fired when a pointing device (usually a mouse) is moved off the element that has the listener attached or off one of its children.

因此,如果我有一个连接了mouseout的容器div,那么我希望如果鼠标从任何一个子节点移出,就会触发该事件.但我所看到的是,如果鼠标被移入容器的孩子,即使然后鼠标被触发.这是一个例子：

x = 0;
$(document).ready(function(){
    $("div.over").mouseout(function(){
        $(".over span").text(x += 1);
    });    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
  <h3 style="background-color:white;">Mouseout event triggered: <span></span></h3>
</div>

当鼠标进入h3时,会触发div.over上的mouseout.为什么？

编辑：请提及权威参考以备份您的声明.

解决方法:

由于您的div包含子项,因此一旦您“鼠标悬停”子项,您就可以“鼠标移出”容器,这是设计的.因为它在它自己的可见空间之外,并且在它的孩子的可见空间内.由于子节点也在父节点内,因此它“继承”该事件,因为它被视为一个单独的卷,但仍在父节点的空间内.这就是当您“抓出”孩子时触发事件的原因.这被称为“冒泡”事件冒泡元素的家谱.

正如Mahi所指出的,如果你使用“mouseleave”,它只会在它离开附加元素的区域时触发.

MDN文档解释了这里的区别：
https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave

但权威的答案最好在W3C DOM规范中查看：

it MUST be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements.

所以它清楚地说明当你移动ONTO其中一个子元素时必须触发事件mouseout.因此,为什么会发生这种情况的原因是设计,通过规范：

https://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout

我添加了一个样本来显示差异

x = 0;
$(document).ready(function(){
    $("div.over").mouseout(function(e){
        $(".over span").text(x += 1);
        console.log(e.target);
    });    
    $("div.over > h3").mouseover(function(){
        $(".over > h3").css("color", "red");
    }).mouseout(function(){
        $(".over > h3").css("color","black");
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
  <h3 style="background-color:white;">Mouseout event triggered: <span></span></h3>
</div>

x = 0;
$(document).ready(function(){
    $("div.over").mouseleave(function(){
        $(".over span").text(x += 1);
    });    
    $("div.over > h3").mouseover(function(){
        $(".over > h3").css("color", "red");
    }).mouseout(function(){
        $(".over > h3").css("color","black");
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
  <h3 style="background-color:white;">Mouseout event triggered: <span></span></h3>
</div>

现在,如果您在“z-space”中向下移动子元素,它将不再影响mouseout事件：

x = 0;
$(document).ready(function(){
    $("div.over").mouseout(function(){
        $(".over").css("background","red");
    }); 
    $("div.over").mouseover(function(){
        $(".over").css("background","#444");
    });       
    $("div.over > h3").css("display", "block");
    $("div.over > h3").css("position", "relative");
    $("div.over > h3").css("z-index", -1000);
    $("div.over > h3").mouseover(function(){
        $(".over > h3").css("color", "red");
    }).mouseout(function(){
        $(".over > h3").css("color","black");
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
  <h3 style="background-color:white;">Mouseout event triggered: <span></span></h3>
</div>

标签：html,javascript,jquery,javascript-events,mouseevent
来源： https://codeday.me/bug/20190727/1553366.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 为什么在对子元素执行mousein时会触发mouseout？