问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
asdfghjkl
    11211

    给父元素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>
    前端javascripthtml
    阅读 1.5k
    1 个回答
    得票最新
    头像
    _usw
      3.8k2618

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

      <!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>

      用颜色标注一下：
      image.png

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

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题