确定被点击的孩子，而其父母拥有自己的点击侦听器

debugcn 发表于 Dev

赞德战争

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

详细说明所有设置

下图所示的绿色标题是可排序的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();
    });
}

我明显不完整的“编辑” 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

之前=单击编辑之前

之后=单击编辑后

卡潘察克

为了获得被点击的实际元素，您可以使用事件的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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。