原生js事件委托下得mouseover和mouseout，移入到子元素就失效了，这是为什么？

Question

原生js事件委托下得mouseover和mouseout，移入到子元素就失效了，这是为什么？

佛脚

61511

发布于
2019-09-26

问题描述

我的需求是鼠标移入到li标签上显示对应的盒子（显示的信息）。但是li标签里面有图片标签和文字标签，问题是鼠标移入到li标签上mouseover是正常的，但是经过子标签mouseover就不管用了

相关代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  ul {
    display: flex;
    flex-wrap: wrap;
    width: 979px;
  }

  li {
    position: relative;
    width: 33.33333%;
    padding: 8px 8px 0 8px;
    border: 1px solid #eeeeee;
    overflow: hidden;
    height: 290px;
    box-sizing: border-box;
    margin-right: -1px;
    margin-bottom: -1px;
    text-align: center;
    overflow: hidden;
  }
  .rec_pic {
    overflow: hidden;
  }
  .rec_font {
    font-size: 14px;
    text-align: center;
    width: 292px;
    line-height: 24px;
    overflow: hidden;
    margin-bottom: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .collect_inquiry {
    width: 100%;
    height: 26px;
    line-height: 26px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: #000;
    opacity: 0.7;
    color: #fff;
    display: none;
  }
  img {
    height: 220px;
  }
</style>
<body>
  <ul class="test">
    <li>
      <div class="rec_pic">
        <a href="javascript:void(0);">
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569476503805&di=faf708cde57e5e9b692f196927fb1e57&imgtype=0&src=http%3A%2F%2Fimage.preludeid.com%2Fuserfiles%2Fprototype_image%2F858d67d7-b82d-4cb9-a385-f1d9f8bfca6e%2FA8134.png"
            alt="测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试">
        </a>
      </div>
      <div class="rec_font">
        <a href="#" target="_blank" title="测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</a>
      </div>
      <div class="collect_inquiry">
        <a href="#" style="border-right: 1px solid #333;">详情</a>
        <a href="#">询价</a>
      </div>
    </li>


    <li>
      <div class="rec_pic">
        <a href="javascript:void(0);">
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569476503805&di=faf708cde57e5e9b692f196927fb1e57&imgtype=0&src=http%3A%2F%2Fimage.preludeid.com%2Fuserfiles%2Fprototype_image%2F858d67d7-b82d-4cb9-a385-f1d9f8bfca6e%2FA8134.png"
            alt="测试测试测试测试测试测试测试测试测试测试v">
        </a>
      </div>
      <div class="rec_font">
        <a href="#" target="_blank" title="测试测试测试测试测试测试测试测试测试测试v">测试测试测试测试测试测试测试测试测试测试v</a>
      </div>
      <div class="collect_inquiry">
        <a href="#" style="border-right: 1px solid #333;">详情</a>
        <a href="#">询价</a>
      </div>
    </li>
  </ul>
</body>
<script>
  // 鼠标悬停事件
  document.querySelector('ul').addEventListener(
    'mouseover',
    function (e) {
      if (e.target.nodeName.toUpperCase() === 'LI') {
        e.target.lastElementChild.style.display = 'block'
      }
    }
    ,
    true
  )
  document.querySelector('ul').addEventListener(
    'mouseout',
    function (e) {
      if (e.target.nodeName.toUpperCase() === 'LI') {
        e.target.lastElementChild.style.display = 'none'
      }
    },
    true
  )
</script>

</html>