title: How to stop propagation without ruining dropdown menu features
body: <p>I have created an object that visually resembles a card (game card) - a card with an image in the top and some information about the card below consisting of texts and symbols. There can be many cards on the page.</p>
  
  <p>Clicking a card brings the user to a new page. This is done by wrapping all card elements in a div with href. Each card also got a dropdown menu with some options. The initial problem with this is that when the dropdown menu is clicked, the card is clicked as well.</p>
  
  <p>I want to stop the card from being clicked when clicking the dropdown menu. The dropdown menu itself should behave as normal when being clicked.</p>
  
  <p>The href div and dropdown elements are shown below (I use onclick in the href div to prevent nesting anchor tags): </p>
  
  <pre><code>&lt;div onclick="window.location.href = 'someurl'" style="cursor: pointer;"&gt;
      ...
      &lt;a href="#" id="dd" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;
          ...
      &lt;/a&gt;
      &lt;ul class="dropdown-menu dropdown-menu-right" role="menu"&gt;
          ...
      &lt;/ul&gt;
      ...
  &lt;/div
  </code></pre>
  
  <p>I tried to put in event.stopPropagation to stop the card from being clicked:</p>
  
  <pre><code>    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" onclick="event.stopPropagation(); $('#dd').toggle();"&gt;
  </code></pre>
  
  <p>While this approach stop the card from being clicked, it also ignores some of the dropdown menu's features. For example, clicking anywhere on the screen or selecting an option in the menu doesn't close it any more. The menu stays open until the dropdown button is clicked explicitly.</p>