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

Question

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

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

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

我看过事件冒泡，但它总是冒泡到用户列表。 我不能让它停在.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> 

Answer 1

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

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

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

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

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

工作演示

Answer 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);
});

工作演示

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

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