hide.bs.dropdown事件的起源/目标？

Question

传递给hide.bs.dropdown处理函数的event.target是下拉列表本身，而不是启动事件的元素。

如何从hide.bs.dropdown事件对象获取启动事件的元素？

<div class="dropdown" id='drop'>
    <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown trigger
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
         ...
    </ul>
</div>
<button class='btn btn-primary'>Other Button</button>

Javascript：

$('#drop').on('hide.bs.dropdown', function(e) {
    console.log(e.target);  //
})

打开下拉菜单，单击按钮，查看console.log目标。
JSFiddle：http : //jsfiddle.net/DTcHh/4215/

如果可能的话，我不希望将click事件绑定到整个页面。

我试图防止在单击文档中的某些元素时关闭下拉菜单。

更新资料

我最终使用了这种方法：https : //stackoverflow.com/a/19797577/2414886但是我仍然希望有一个更紧凑的解决方案。

Answer 1

这是一个老问题，据我所知，它是在 bootstrap 3 中发布的。我仍然发布我的用例，以防它今天对其他人有帮助。

我对我一直在开发的 bootstrap 4.5 下拉菜单有类似的要求。我需要一些下拉菜单项处于非活动/禁用状态，因此单击它们不会导致下拉菜单关闭。我设法利用 hide.bs.dropdown 事件的 clickEvent 属性解决了这个问题。clickEvent 属性保存原始单击事件的事件对象。所描述的用例在可以使用相同方法解决的意义上是相似的。

这是一个 jsfiddle，使用 clickEvent 属性来确定触发单击事件的原始元素，并有条件地保持下拉菜单打开。在本例中，它是页面上某处的按钮，与下拉菜单无关。

https://jsfiddle.net/oc2bdmvr/

基于引导文档：

https://getbootstrap.com/docs/5.0/getting-started/download/

“hide.bs.dropdown 和 hide.bs.dropdown 事件具有 clickEvent 属性（仅当原始事件类型为 click 时），其中包含单击事件的事件对象。”

对于我的特定用例，我使用 JQuery 来解析 DOM，并确定单击的下拉项是否会导致关闭下拉菜单。我的下拉项也比列表项更复杂，即它们是包含子对象的面板，其中任何一个都可以触发鼠标单击事件。我在下面粘贴了一个对我有用的代码片段。这是一个 jsfiddle 链接：https: //jsfiddle.net/z6gyjaps/

$(".dropdown").on("hide.bs.dropdown", function(e) {

  if (e && e.clickEvent && e.clickEvent.target) {
    let target = $(e.clickEvent.target);
    if (!target.hasClass("dropdown-item")) {
      // This is useful when your drop down items container complex hierarchies.
      // JQuery parents() will find the first ancestor in the DOM hierarchy using some selector.
      target = target.parents(".dropdown-item");
    }

    if (target.length > 0 && target.hasClass("inactive")) {
      return false;
    }
  }

  return true;
});

.dropdown-item-header {
  font-weight: bold;
}

.dropdown-item-content {
  margin: 20px;
}

.dropdown-item.inactive {
  cursor: default !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item inactive" type="button">Disabled action</button></li>
    <li>
      <div class="dropdown-item inactive">
        <div class="dropdown-item-header">
          Some Disabled complex item
        </div>
        <div class="dropdown-item-content">
          Some contrent
        </div>
      </div>
    </li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>