javascript - 当单击某个元素或其子元素时，如何获取该元素的 ID？

Question

已更新

我想我可能无意中让这个问题变得困惑。这是一个更具体的更新，根据我迄今为止收到的评论和答案更新了代码。感谢所有花时间发表评论和回答的人。

如何获取 <div> 的 ID类(class) .button当我有 .button 的点击监听器时。如果.button或者单击它的任何子项，它应该返回该特定 div 的 ID类(class) .button .

这是我到目前为止所拥有的:New JSFiddle

HTML

<div class="row">
  <div id="b1" class="button">
    <h2>Button 1</h2>
  </div>
  <div id="b2" class="button">
    <h2>Button 2</h2>
  </div>
  <div id="b3" class="button">
    <h2>Button 3</h2>
  </div>
</div>

jQuery

var selected = "";

$('.button').on('click', function(e) {
  selected = e.target.id;

  $('.button').css('backgroundColor', '#becde5');
  $('#' + selected).css('backgroundColor', '#3b71c6');

  $('#selected').html(selected);
});

如果我点击<h2>，这几乎是正确的，但不会传播。该功能不起作用。但是，如果我单击 .button div 本身就可以工作。

初始问题

我正在尝试创建一个通用函数，可以识别从其父级单击监听器中选择的子级。子元素可能有自己的子元素，这些子元素都被视为同一元素的一部分，因此，如果选择了这些子元素中的任何一个，它们也应该从点击监听器中引发相同的响应。

这是我迄今为止所做工作的一个示例:JSFiddle

由三个按钮组成的 HTML，每个按钮都有一个子按钮 <h2>标记并分享 <div class="row">作为他们的 parent 。

<div class="row">
  <div class="b1 button">
    <h2 class="b1">Button 1</h2>
  </div>
  <div class="b2 button">
    <h2 class="b2">Button 2</h2>
  </div>
  <div class="b3 button">
    <h2 class="b3">Button 3</h2>
  </div>
</div>

监听 <div class="row"> 上的点击的 jQuery 。它检索单击元素的第一个类名并将其存储在变量中。在这种情况下引发的响应是 CSS 样式的更改 background-color尽管这是任意的，并且会根据函数的使用而改变。

var selected = "";

$('.row').on('click', function(e) {
  selected = e.target.className.split(" ")[0];

  $('.b1, .b2, .b3').css('backgroundColor', '#becde5');
  $("." + selected).css('backgroundColor', '#3b71c6');

  $('#selected').html(selected);
});

事实上，我向元素添加很多类纯粹是为了在单击时识别它们，这似乎不会很好地扩展，并且通常是一个不好的方法。此方法还意味着我始终必须将标识所选元素的类名称放在其 HTML class 的开头。属性。这可能会与使用相同方法的其他函数发生冲突。

是否有更好的方法来识别从其父级单击监听器中选择的子元素，其中子元素可能有其他子元素也需要监听器的相同响应？

Answer 1

根据编辑的问题进行编辑:

我认为您真正想要的是触发事件的元素的id。
但是通过使用e.target，您将获得目标元素...它不一定是触发事件的元素。

参见this updated Fiddle .

因此，只需使用 $(this) 作为选择器来检索 id...使用 .attr("id")。

;)

回答最初的问题:
为了确定可以“选择”的内容，我使用了“可点击”类。

为了避免使用 id 或 class 作为标识符来确定点击的内容，
data 属性可能很有用。

我使用了data-id...但是你可以使用任何你想要的，例如:data-selected或data-target，并为其分配任何值。

在下面的代码中，我制作了两个完全相同的行，除了它们的 data-id 值。

var selected = "";

$('.clickable').on('click', function(e) {
    e.stopPropagation(); // To prevent bubbling.

    // Reset all bg colors
    $('.button').css('backgroundColor', 'initial');
    $('.row').css('backgroundColor', 'initial');

    // Find exactly what was clicked
    if ($(this).hasClass("row")) {
        var row = $(this).data("id");
        selected = row + " (whole)";
    }

    if ($(this).hasClass("button")) {
        // Find in which row
        var row = $(this).closest(".row").data("id");
        var btn = $(this).data("id");
        selected = btn + " in " + row;
    }

    // Pale all buttons
    $('.button').css('backgroundColor', '#becde5');
    // Change bg color of the selected element
    $(this).css('backgroundColor', '#3b71c6');

    $('#selected').html(selected);
});

.row {
    display: table;
    width: 100%;
    color: white;
    border-spacing: 20px;
}

.button {
    display: table-cell;
    border-radius: 12px;
    background-color: #6fa1f2;
    text-align: center;
}

#selected {
    font-size: 30px;
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span>Selected : <span id="selected">no selection</span></span><br>
<div class="row clickable" data-id="row1">
    <div class="button clickable" data-id="btn1">
        <h2>Button 1</h2>
    </div>
    <div class="button clickable" data-id="btn2">
        <h2>Button 2</h2>
    </div>
    <div class="button clickable" data-id="btn3">
        <h2>Button 3</h2>
    </div>
</div>

<br>
<div class="row clickable" data-id="row2">
    <div class="button clickable" data-id="btn1">
        <h2>Button 1</h2>
    </div>
    <div class="button clickable" data-id="btn2">
        <h2>Button 2</h2>
    </div>
    <div class="button clickable" data-id="btn3">
        <h2>Button 3</h2>
    </div>
</div>