title: Cannot copy draggable element unless sibling is clicked first
body: <p>If an element with a copy event bound to it has an element with draggable inside of it, the copy event is not fired unless you first click on a non-draggable sibling.</p>
  <p>Here is the code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id='copy'&gt;
    &lt;div draggable='true'&gt;Draggable&lt;/div&gt;
    &lt;div&gt;Non-draggable&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>const copy = document.getElementById('copy');
  
  copy.addEventListener('copy', (e) =&gt; {
      alert('copied');
  });
  </code></pre>
  <p><a href="https://jsfiddle.net/pg4f0usx/" rel="nofollow noreferrer">https://jsfiddle.net/pg4f0usx/</a></p>
  <p>Replication steps:</p>
  <ul>
  <li>Run the fiddle</li>
  <li>Click on the draggable element and press <kbd>Ctrl</kbd>-<kbd>C</kbd> - nothing will happen</li>
  <li>Click on the non-draggable element and press <kbd>Ctrl</kbd>-<kbd>C</kbd> - the 'copied' alert will pop up</li>
  <li>Click on the draggable element and press <kbd>Ctrl</kbd>-<kbd>C</kbd> - the 'copied' alert will pop up</li>
  </ul>
  <p>This happens in both FireFox and Chrome.  Is there a way to avoid needing to click on the non-draggable element for the copy event to be fired on the parent element?</p>