当任何孩子点击新创建的元素时如何获取父元素的ID答案

【问题标题】：How to get the ID of a parent element when any child clicked on newly created elements当任何孩子点击新创建的元素时如何获取父元素的ID
【发布时间】：2019-05-19 02:02:59
【问题描述】：

我有一个通过循环创建的用户列表（来自 API 的数据）。当单击其任何子元素时，我试图返回父元素的 ID。

示例：如果用户单击任何 div（.user-info、.user-name 或 .user-city），我希望能够返回父 div.user 的 id

我尝试遍历用户列表的所有子元素，但我只得到一个空对象，因为这些项目是在页面加载后添加的。

我看过事件冒泡，但它总是冒泡到用户列表。我无法让它停在 .user

我尝试了类似的方法，但它只返回每个元素而不是父元素的 ID：

const userList = document.querySelector(".user-list");

userList.addEventListener("click", event => {
  if (event.target.classList.contains('user')) {
    console.log(event.target)
  }
});

<div class="user-list">
  <div class="user" id="1">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/91.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">josef moore</div>
      <div class="user-email email-wrap">josef.moore@example.com</div>
      <div class="user-city">winchester</div>
    </div>
  </div>
  <div class="user" id="2">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/98.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">alexander richardson</div>
      <div class="user-email email-wrap">alexander.richardson@example.com</div>
      <div class="user-city">stoke-on-trent</div>
    </div>
  </div>
  <div class="user" id="3">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/98.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">alexander richardson</div>
      <div class="user-email email-wrap">alexander.richardson@example.com</div>
      <div class="user-city">stoke-on-trent</div>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript events

【解决方案1】：

const userList = document.querySelector(".user-list");

userList.addEventListener("click", event => {
    var element = event.target;
    alert(element.closest('.user').id);
});

Element接口的closest()方法返回当前元素（或当前元素本身）最近的祖先。

注意：IE 中不支持，但可以使用 polyfill。

参考：https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Working Demo

【讨论】：

【解决方案2】：

这样的？

const userList = document.querySelector(".user-list");

function findParent(element) {
    const parent = element.parentNode;
    if (parent.classList.contains('user')) {
        console.log(parent.id);
    } else if (parent) {
       findParent(parent);
    }
}

userList.addEventListener("click", event => {
    findParent(event.target);
});

Working demo

【讨论】：

【解决方案3】：

这可能被认为是“预算”方法，但您可以向上遍历元素树，直到找到user，然后检查它的id：

document.getElementsByClassName("user-list").item(0).addEventListener("click",function(event){
  var target=event.target;
  var classes;
  while(!(classes=target.classList).contains("user-list")){
    if(classes.contains("user")){
      console.log(target.id);
    }
    target=target.parentElement;
  }
});

<div class="user-list">
  <div class="user" id="1">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/91.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">josef moore</div>
      <div class="user-email email-wrap">josef.moore@example.com</div>
      <div class="user-city">winchester</div>
    </div>
  </div>
  <div class="user" id="2">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/98.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">alexander richardson</div>
      <div class="user-email email-wrap">alexander.richardson@example.com</div>
      <div class="user-city">stoke-on-trent</div>
    </div>
  </div>
  <div class="user" id="3">
    <div class="user-photo">
      <img src="https://randomuser.me/api/portraits/men/98.jpg" alt="" />
    </div>
    <div class="user-info">
      <div class="user-name">alexander richardson</div>
      <div class="user-email email-wrap">alexander.richardson@example.com</div>
      <div class="user-city">stoke-on-trent</div>
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

如果你使用 Jquery，这是代码

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $('.user-info, .user-name, .user-city').click(function() {
            var div_id = $(this).closest('.user').attr('id');
            console.log(div_id);
        });
    });
</script>

【讨论】：