javascript - 如何获取包装元素onclick的id？

Question

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

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

所以这里是要求：

单击时how，我想获取包装的ID，span即one，单击时are它应该显示包装<p>ID，依此类推you。

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

所以请建议我该怎么做？

如果是重复的，请给我链接。

谢谢

Answer 1

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

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

小提琴

Answer 2

这是非常简单的 jQuery。

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

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

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

Answer 4

这可以满足您的要求：

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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