Bootstrap dropdown not working when parent has a click event

Question

I have a Bootstrap dropdown menu inside a container that triggers an event--the way I want it to work is, if you click the dropdown button, the menu items are displayed as normal. If you click anywhere else within the container, the parent event should be triggered (in this case displaying a Javascript alert). Instead, the event is being triggered even when I click the dropdown button.

Is there some way I can get the dropdown click event to "override" its parent event, so that if it's clicked its own evnet will be triggered the parent event won't?

<div class='main-container' onClick='alert("a thing was clicked!")'>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action 1</a>
      <a class="dropdown-item" href="#">Action 2</a>
      <a class="dropdown-item" href="#">Action 3</a>
    </div>
  </div>
</div>

http://jsfiddle.net/0fpbcy2L/12/

What version of Bootstrap are you using and do you have the BS JavaScript linked in your code? — mlegg, Oct 20 '18 at 17:41
@mlegg 4.1.3, and yes (I have it linked in the JS fiddle also) — rurouniwallace, Oct 20 '18 at 17:49
Possible duplicate of https://stackoverflow.com/questions/9183381/how-to-have-click-event-only-fire-on-parent-div-not-children — Martin, Nov 14 '18 at 10:21

Bootstrap dropdown not working when parent has a click event

0 Answers0