H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】原生js事件委托下得mouseover和mouseout,移入到子元素就失效了,这是为什么?

问题描述

我的需求是鼠标移入到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="/wp-content/uploads/aaacj/202104/1939221524.jpg"
            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="/wp-content/uploads/aaacj/202104/1939221524.jpg"
            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>

你期待的结果是什么?实际看到的错误信息又是什么?

希望哪个高人能够帮我解决一下,在此谢谢了。

回答:

mouseover/mouseout 两种事件会冒泡,切换子元素就会触发事件。
可以切换成:
mouseover => mouseenter
mouseout => mouseleave

本文地址:H5W3 » 【前端问题精选】原生js事件委托下得mouseover和mouseout,移入到子元素就失效了,这是为什么?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址