当前位置：文江博客话题详情

JavaScript HTML 前端

怎么让事件源只能是父元素的子元素，而不是孙子元素？

发布于 2022-09-13 01:24:28 字数 1043 浏览 10 评论 0

给父元素parent添加一个点击事件后，当点击parent区域后，会得到事件源，然而父元素的子元素还有元素，并且还占满父元素。问题：当我点击parent区域时，怎么让事件源是子元素，而不是孙子元素。

  <div class="parent">
    <div class="chlid">
      <div class="grandson"></div>
      <div class="grandson"></div>
      <div class="grandson"></div>
      ...
    </div>
    <div class="chlid">
      <div class="grandson"></div>
      <div class="grandson"></div>
      <div class="grandson"></div>
      ...
    </div>
    <div class="chlid">
      <div class="grandson"></div>
      <div class="grandson"></div>
      <div class="grandson"></div>
      ...
    </div>
    ...
  </div>

  <script>
    let parent = document.querySelector(".parent");
    parent.addEventListener("click",function(e){
      e = e || window.event;
      let target = e.target;

      // 怎么回回点击parent区域 等得到的事件源还是 div.child？

    },false)
  </script>

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

源来凯始玺欢你 2022-09-20 01:24:28

事件永远发生在真实的位置上，点了里面的元素就是点了里面的元素。只不过你的事件监听实在父元素上。试想一下，如果在父元素绑定事件监听，不管点里面哪一个元素，都认为事件源是父元素，那怎么做事件代理。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>循环生成表格</title>
    <style>
      body {
        height: 100vh;
      }
      
      .parent {
        width: 100%;
        height: 100%;
      }
      
      .parent .chlid {
        height: 30px;
        margin-bottom: 10px;
        border: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      
      .grandson {
        flex: 1;
        height: 100%;
        background: green;
        margin-right: 10px;
      }
    </style>
</head>
<body>
  <div class="parent">
    <div class="chlid">
      <div class="grandson"></div>
      <div class="grandson"></div>
      <div class="grandson"></div>

    </div>
    <div class="chlid">
      <div class="grandson"></div>
      <div class="grandson"></div>
      <div class="grandson"></div>

    </div>
    <div class="chlid">
      <div class="grandson"></div>
      <div class="grandson"></div>
      <div class="grandson"></div>

    </div>

  </div>
  
  <script>
    let parent = document.querySelector(".parent");
    parent.addEventListener("click",function(e){
      e = e || window.event;
      let target = e.target;
      
      console.log(">>>>", target)
      
      // 怎么回回点击parent区域 等得到的事件源还是 div.child？
      
    },true)
  </script>
</body>
</html>

用颜色标注一下：

点绿色的部分事件源就是grandson，红色部分就是child，蓝色部分就是parent

~没有更多了~

关于作者

°如果伤别离去

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

一梦浮鱼

文章 0 评论 0

mb_Z9jVigFL

文章 0 评论 0

伴随着你

文章 0 评论 0

耳钉梦

文章 0 评论 0

18618447101

文章 0 评论 0

蜗牛

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文