确定被点击的孩子，虽然它的父母拥有它自己的点击监听器

Question

我在页面上有多个手风琴小部件。

详细说明它是如何设置的

• 如下图所示的绿色标题是jQuery UI可排序的句柄
• 绿色标题还有一个点击侦听器，可以折叠/展开手风琴。
• 编辑按钮有自己的点击监听器，当按照预期触发时，它也会触发监听器以折叠手风琴

是否可以获取被点击的ACTUAL元素，以便我可以检查它不是编辑/保存/丢弃等按钮？

我的手风琴JS是：

this.accordion = function () {
    var element = $('.accordion > .panel-heading');

    element.on('click', function () {
        var self = $(this);
        if (self.hasClass('open')) {
            self.parent().find('.panel-body').stop().slideUp();
            self.find('.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-up')
            self.removeClass('open');
            return;
        }

        self.addClass('open');
        self.find('.fa-caret-up').removeClass('fa-caret-up').addClass('fa-caret-down')
        self.parent().find('.panel-body').stop().slideDown();
    });
}

我明显不完整＆＃34;编辑＆＃34; JS是：

this.editableWidgets = function () {

    var edit = $('.panel .widgetBtn_edit');
    var save = $('.panel .widgetBtn_save');
    var discard = $('.panel .widgetBtn_discard');

    edit.on('click', function () {
        $(this).hide();
        $(this).next('.widgetBtn_save').show();
        $(this).next().next('.widgetBtn_discard').show();
    });

    save.on('click', function () {
        alert('hook up saving functionality')
    })

    discard.on('click', function () {
        $(this).hide();
        $(this).prev('.widgetBtn_save').hide();
        $(this).prev().prev('.widgetBtn_edit').show();
    })

}

图1

之前=点击编辑之前

After =点击编辑后

Answer 1

为了获得被点击的实际元素，您可以使用事件的target属性。

在下面的示例中，尝试单击有界的div和绿色范围，并查看提醒的不同ID：

//Event listener on outer element (#outer)
$(document).on('click', '#outer', function(e) {
  //e.target gets the actual element clicked
  var trg = e.target;
  var id = $(trg).attr('id');
  alert(id);
});

#outer {
  padding:10px;
  border: 1px solid #d8d8d8;
}

#inner { background-color:green; color:#fff }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
  Outer
  <span id="inner">Inner</span>
 </div>