hide.bs.dropdown event origin/target?

Question

event.target passed to the hide.bs.dropdown handler is the dropdown itself, not the element starting the event.

How can I get the element that started the event from the hide.bs.dropdown event object?

<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);  //
})

Open the dropdown, click the button, look at console.log target.
JSFiddle: http://jsfiddle.net/DTcHh/4215/

I'd prefer not to bind a click event to the entire page if possible.

I'm trying to prevent the dropdown from closing when certain elements are clicked on my document.

Update

I ended up using this method: https://stackoverflow.com/a/19797577/2414886 however I'm still hoping for a more compact solution.

I'm assuming you're trying to get the item clicked within the dropdown? Otherwise, it hides on blur, which means you may have luck by hooking into window.focus on hide — Ted, Feb 11 '15 at 16:11
@Ted Hi Ted, no but I should have clarified. I'm trying to prevent the dropdown from closing with a return false; when certain elements of my page are clicked. — Ezra Bailey, Feb 11 '15 at 16:32

Konstantinos Giannelos · Answer 1 · 2021-04-12T23:14:46.707

This is an old question and from what I see it was posted given bootstrap 3. Still I am posting my use case just in case it helps someone else today.

I had a similar requirement for a bootstrap 4.5 drop down menu I have been working on. I needed some of drop down menu items to be inactive/disabled, so clicking on them would not result in the drop down menu to close. I managed to resolve this by utilising the clickEvent property of the hide.bs.dropdown event. The clickEvent property holds the Event Object of the original click event. The use case described is similar in the sense that is can be solved using the same approach.

Here is a jsfiddle using the clickEvent property to determine the original element trigerring the click event and keep the drop down menu open conditionally. In this case, it is a button somewhere on the page, unrelated to the dropdown menu.

https://jsfiddle.net/oc2bdmvr/

Based on bootstrap documentation:

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

"hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the original Event type is click) that contains an Event Object for the click event."

For my specific use case, I used JQuery to parse the DOM and figure out if the drop down item being clicked should result in closing the dropdown menu or not. My drop down items were also more complicated than just list items, i.e they were panels holding child objects, any of which could trigger a mouse click event. I have pasted below a code snipet that worked for me. Here is a jsfiddle link for the same: 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>

Hey I love your answer! That is exactly what I have been looking for for hours. It seems like there is very little information on `clickEvent`. I tried to use it but `e.clickEvent` is returning undefined no matter where I click. Is there something I am missing? — cytek04, Jun 30 '22 at 21:57
@cytech04 There is no clickEvent if you click on the parent button, only on one of the dropdown items. — dearsina, Jul 03 '22 at 07:49
@dearsina That is correct. It is returning undefined when clicking on a dropdown item (or anywhere else on the page). After some testing, I realized BS 3 is not compatible with `clickEvent`, though I could not find documentation stating that. I now have it working using Bootstrap 4. — cytek04, Jul 05 '22 at 00:25

hide.bs.dropdown event origin/target?

1 Answers1