如何获取包装元素onclick的id？ [关闭]答案

【问题标题】：How to get the id of the wrapping element onclick? [closed]如何获取包装元素onclick的id？ [关闭]
【发布时间】：2013-05-15 09:46:00
【问题描述】：

我想在点击时获取包装元素的 ID。像这样的

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

所以这是要求：

单击how 时，我想获取包装span 的ID，即one，当单击are 时，它应该显示包装<p> id 等等you。

我为此使用 jquery，并且我使用了 .prop、.wrap，但每次我得到外部 <p> 元素的 ID。

所以请建议我该怎么做？

如果是重复的，请提供链接。

谢谢

【问题讨论】：

（不是反对者）可能是因为您想要的元素包含在点击事件中并且非常基本。

标签： javascript jquery jquery-selectors

【解决方案1】：

您可以查看传递给点击函数的事件参数

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

FIDDLE

【讨论】：

+1 - 几乎成功了。

【解决方案2】：

这是非常简单的 jQuery。

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

这是一个小提琴：http://jsfiddle.net/zjysy/

【讨论】：

这不适用于“are”。
我发帖后才意识到这一点。但是，wirey 的回答比我想出的要好得多。 :)

【解决方案3】：

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

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

http://jsfiddle.net/AMWqq/

【讨论】：

既然你要使用 ES5，你可以先var forEach = Function.call.bind([].forEach); 然后forEach(spans, ...)

【解决方案4】：

这就是你想要的：

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

更新：在这里试试：http://jsfiddle.net/zjysy/2/

【讨论】：

【解决方案5】：

试试这个：http://jsfiddle.net/justincook/E6NFG/

$('p, span').on('click', function(){
   console.log($(this).attr('id'));
   return false;
});

【讨论】：

【解决方案6】：

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

【讨论】：

请考虑用一些评论和代码解释来限定这个答案。

【解决方案7】：

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

【讨论】：