当移过元素的子元素时，mouseout的事件不触发

tinna 发布于2019-08-20 15:51 / 2520人阅读

摘要：场景在一个元素上监听了一个的事件，但是当鼠标在这个元素的子元素上移动时，就会触发这个事件。但是我们希望是在这个元素内活动，都是算这个元素的，并不希望触发这个事件。

场景：
在一个元素上监听了一个mouseout的事件，但是当鼠标在这个元素的子元素上移动时，就会触发这个事件。但是我们希望是在这个元素内活动，都是算这个元素的，并不希望触发这个事件。

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

这里的关键是判断event.toElement 和event.relatedTarget的父元素或者更高级的元素是不是这个元素，如果不是了，再去实行这个函数。

问题描述

云服务器 GPU云服务器 js 输入时触发事件 DOM元素事件不触发鼠标按下事件 WebRTC源码offer不触发事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82533.html

原生js练习题---第二课（下）

摘要：最后，我们只要在事件处理程序中获得这个布尔值传给这几个函数就可以了，其中，全选框反选链接可以从全选框的属性获得这个值，而全体的复选框要获得就得靠遍历了。 0x1播放列表收缩展开实现效果值得注意的一个地方是那个箭头，我这里只是用了简单的字符串替换，而原题用了背景图片移动来实现切换箭头，但是似乎那样做会导致整个容器的左右偏移、效果不是很好。 0x2鼠标移过显示车标实现效果这题看起来...

Little_XM 2019-08-19 17:51 评论0 收藏0
实例解析mouseover,mouseout与mouseenter,mouseleave之间的区别

摘要：定义在鼠标光标从元素外部首次移动到元素范围之内时触发，这个事件不冒泡。又移入的另一个元素可能位于前一个元素的外部，也可能是该元素的子元素。前言我们都知道js提供了鼠标事件，而鼠标事件中包含了两对事件，即mouseover和mouseout以及mouseenter和mouseleave这两对事件，如果只是单纯的读红宝书上的文字可能体会不到他们的差别，现在我们就用实例来证明一下这个两...

褰辩话 2019-08-23 14:23 评论0 收藏0
mouseenter与mouseover为何这般纠缠不清？

摘要：而当鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。造成以上现象本质上是事件不支持冒泡所致。事件属性返回与事件的目标节点相关的节点。我们通过排查和，最后只留下，也就是与事件一起触发的时机。前言原文地址项目地址不知道大家在面试或者工作过程中有没有被mouseover和mouseenter(对应的是mouseout和mouseleave)事件所困...

王岩威 2019-08-29 12:42 评论0 收藏0
mouseenter与mouseover为何这般纠缠不清？

摘要：而当鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。造成以上现象本质上是事件不支持冒泡所致。事件属性返回与事件的目标节点相关的节点。我们通过排查和，最后只留下，也就是与事件一起触发的时机。前言原文地址项目地址不知道大家在面试或者工作过程中有没有被mouseover和mouseenter(对应的是mouseout和mouseleave)事件所困...

_Dreams 2019-08-20 17:02 评论0 收藏0
JavaScript 笔记 —— 鼠标事件的浏览器差异

摘要：本文总结一下，鼠标事件在不同浏览器实现的差异。和相关元素差异和是级事件当中的其中两个事件。标准事件对象使用属性来识别鼠标按键。该事件当中的值与事件对象当中的作用相同。鼠标是我们在 PC 端浏览网页时候最重要的交互工具，因此鼠标事件也是 Web 开发当中最常用的一类事件。然而，由于各种原因，不同厂商或者不同版本的浏览器之间对于鼠标事件的实现也有所不同。本文总结一下，鼠标事件在不同浏览器...

haoguo 2019-08-21 10:25 评论0 收藏0