Javascript 如何在单击时获取包装元素的id？

我想获得包装元素onclick的ID。像这样的

<p id="wrapper"> Hello <span id="one"> how </span> are <span id="two">you</span></p>

这就是要求：

当单击“如何获取包装跨度的id”时&即1，当单击“是”时，也应为您显示包装id等等

我使用jquery来处理这个&I trid和.prop、.wrap，但是每次我获取外部元素的ID时

所以，请建议我该怎么做

如果它是一个重复的，所以请提供给我的链接

---

谢谢

这是非常简单的jQuery

$('span').click(function() {
    console.log($(this).attr('id'));
});

---

这里有一把小提琴：

这正是你想要的：

$('#wrapper').click(function(e) {
    alert($(e.target).closest('[id]').prop('id'));
});

---

更新：请在此处尝试：

您可以查看传递到click函数的事件参数内部

$('#wrapper').click(function(e){
   console.log(e.target.id); 
});

试试这个：

---

您可以轻松地将侦听器附加到跨度：

var forEach = Function.call.bind([].forEach);
spans=document.querySelectorAll("p span");
forEach(spans, function(span){
    span.addEventListener("click", function(e){
        alert(e.target.id);
    });
});

---

不是一个向下投票者，可能是因为你想要的元素包含在点击事件中，而且非常基本。这对are不起作用。我在发布后意识到了这一点。然而，威利的回答比我想的要好得多+1-非常准确。因为您要使用ES5，所以可以执行var forEach=Function.call.bind[].forEach；然后，请考虑对这个答案进行一些注释和解释。

$(document).click(function(e){
alert(e.target.id);
});

var forEach = Function.call.bind([].forEach);
spans=document.querySelectorAll("p span");
forEach(spans, function(span){
    span.addEventListener("click", function(e){
        alert(e.target.id);
    });
});

$(document).ready(function(){
    $('span, p').click(function(){
        alert($(this).attr('id'));
        return false;
    });
});