title: how to propagate mousedown event to sibling?
body: <p>You've seen the 'in case of emergency, break glass' signs before.  Behind the glass there is a button to press to sound an alarm.   In my scenario, I am trying to build something like that, where the user can <em>break the glass</em> and then <em>press the button</em> with <strong><em>one</em></strong> mousedown event.  Let me explain... </p>
  
  <p>I've a parent element [A] with two children.  The first child [B] is behind and occluded by the second child [C].</p>
  
  <p>The second element [C] serves as a protective screen, preventing mouse move events from getting to the second element.  This is done by calling <code>stopPropagation</code> on those events.  </p>
  
  <p>When the user does mousedown on [C], that element should disappear and the mouse event should go its sibling.  I make the element disappear by setting its display to none.</p>
  
  <p>However the mousedown event does not go to the sibling [B], it bubbles to the parent [A].  Subsequent mousedown events <em>do</em> go to the sibling [B]. </p>
  
  <p>How would I make the initial mousedown event on [A] go to [B]?  That is, as soon as the glass is broken [A], how to press the button [B]?</p>
  
  <p>Here is an example:
  <a href="https://codepen.io/jedierikb/pen/JLPJrm" rel="nofollow noreferrer">https://codepen.io/jedierikb/pen/JLPJrm</a></p>