javascript - jQuery:在父元素中查找冒泡事件的触发元素

Question

我有以下 HTML block :

<div class="col-sm-4">
    <div class="input-group input-group-sm">
        <div class="input-group-prepend">
            <button 
                class="btn btn-outline-secondary dropdown-toggle" 
                type="button" 
                data-toggle="dropdown" 
                aria-haspopup="true" 
                aria-expanded="false">&pound;</button>
            <div class="dropdown-menu">
                <span class="dropdown-item" data-value="£">&pound;</span>
                <span class="dropdown-item" data-value="%">%</span>
            </div>
        </div>
        <input type="hidden" name="new_item_value_type[]" value="£">
        <input type="text" class="form-control form-control-sm text-right" name="new_item_value[]">
    </div>
</div>

此 HTML 是动态生成的并添加到 <div>类别为item-list .

我有以下 JavaScript:

$('.item-list').on('hide.bs.dropdown', function() {
    var $this = $(this);
    console.log('dropdown hide event', $this);
});

这捕获了 dropdown hide event ，但是它没有告诉我哪个元素触发了该事件。变量$this与父元素相关，与触发元素无关。

当我监听此事件冒泡到父元素时，如何判断哪个元素触发了此事件？

Answer 1

来自Bootstrap documentation :

All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element.

这样的代码可以更改为:

$('.item-list').on('hide.bs.dropdown', function(e) {
  console.log('dropdown hide event', e.relatedTarget);
});