javascript - 当父级有点击事件时，引导下拉菜单不起作用

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>

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

标签： javascripthtmltwitter-bootstrap