javascript - 如何避免移入子级时触发父级的onmouseout事件？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 如何避免移入子级时触发父级的onmouseout事件？

PHP中文网 2017-04-11 11:37:36

[JavaScript讨论组]

565

比如span是p的子级，p有个onmouseout事件函数是删除子级span，但是我现在移动到span上，js认为也是触发了p的onmouseout事件了，我大概知道可能和事件冒泡或者事件捕获有关，但具体怎么才能避免触发父级的onmouseout事件呢？

PHP中文网

认证高级PHP讲师

全部回复(2)

阿神2017-04-11 11:39:36 2楼

mouseout 和 mouseleave 兩者之間有一些不同：

mouseout 如果移出被選取的元素時，就會觸發 mouseout，包括移動到其子元素也會觸發
mouseleave 同樣也是移出被選取的元素時，會觸發 mouseleave，但不包括其子元素，所以除非移出被選取元素範圍，不然都不會觸發 mouseleave

這邊的例子很直觀的表現了兩者不同
mouseout 和 mouseleave 的不同

就你代碼而已，如果沒有其他需求，就只需要把 op.onmouseout 改成 op.onmouseleave 即可：

op.onmouseleave = function() {
    oSpan.style.display = 'none'
}

赞 +0

添加回复

PHP中文网2017-04-11 11:39:36 1楼

一开始误解了你的意思，onmouseout事件的触发时机定义就是：在鼠标移出一个元素，或者移出这个元素的子元素，所以会出现你的那种情况，解决办法可试试如下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#p1{
  width: 200px;height: 200px;background: red;
}
#span1{
  width: 100px;height: 100px;background: blue;display: inline-block;
}
</style>
<script type="text/javascript"> 
function isMouseLeaveOrEnter(e, handler) {    
  var reltg=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?e.toElement:e.fromElement;    
  while (reltg && reltg != handler){
     reltg = reltg.parentNode; 
  }       
  return (reltg != handler);    
} 
window.onload=function(){
  var op = document.getElementById("p1");
  var oSpan = document.getElementById("span1");
  op.onmouseout=function(ev){
    var ev=ev||window.event;
    if(!isMouseLeaveOrEnter(ev,op)){
      return false;
    }
    oSpan.style.display = 'none';
  }
}
</script>
</head>
<body>
    <p id="p1">
        <span id="span1"></span>
    </p>
</body>
</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>