mouseout 事件

最新推荐文章于 2024-01-27 12:59:40 发布

唐品

最新推荐文章于 2024-01-27 12:59:40 发布

阅读量974

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/tangpin/article/details/23441445

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

给一个元素绑定了mouseout事件，当鼠标离开这个元素的子元素的时候就会触发这个事件，并且鼠标由父元素进入子元素时也会触发父元素的mouseout事件。

用jQuery的mouseleave事件就可以实现想要的功能，如果不使用jQuery的话可以用停止事件冒泡和判断ralatedTarget来实现，示意代码如下：

//判断是否为包含关系，为IE和DOM做了兼容处理
function contains(parentNode, childNode) {
  return parentNode.contains ? parentNode != childNode && parentNode.contains(childNode) : 
!! (parentNode.compareDocumentPosition(childNode) & 16);
}

//事件绑定没有做IE兼容
document.getElementById("out").addEventListener('mouseout', function(Event) {
  if (contains(this, event.relatedTarget)) {} else {
    alert("out");
  }
}, false);

document.getElementById("in").addEventListener("mouseout", function(event) {
  event.stopPropagation();
  console.log("#in mouseout");
}, false);