hide.bs.dropdown 事件来源/目标？

Posted 2023-05-07

【中文标题】hide.bs.dropdown 事件来源/目标？

【英文标题】：hide.bs.dropdown event origin/target?

【发布时间】：2015-04-12 02:12:17

【问题描述】：

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

如何从 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/

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

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

更新

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

【问题讨论】：

我假设您正在尝试在下拉列表中点击该项目？否则，它会在模糊时隐藏，这意味着您可能会通过挂钩 window.focus on hide 来获得好运

@Ted 嗨，Ted，不，但我应该澄清一下。我试图阻止下拉菜单以 return false 关闭；当我的页面的某些元素被点击时。

【参考方案1】：

这是一个老问题，据我所见，它是在引导程序 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 和 hidden.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>