当家长发生点击事件时，引导程序下拉列表不起作用

Question

我在一个触发事件的容器内有一个Bootstrap下拉菜单，我希望它的工作方式是，如果单击下拉按钮，则菜单项将正常显示。如果在容器内的其他任何位置单击，则应触发父事件（在这种情况下，将显示Javascript警报）。相反，即使单击下拉按钮，事件也会被触发。

我是否可以通过某种方式使下拉单击事件“覆盖”其父事件，以便如果单击它自己的evnet，则不会触发该父事件？

<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>

Plotting a python dict in order of key values