Cannot copy draggable element unless sibling is clicked first

Question

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.

Here is the code:

<div id='copy'>
  <div draggable='true'>Draggable</div>
  <div>Non-draggable</div>
</div>

const copy = document.getElementById('copy');

copy.addEventListener('copy', (e) => {
    alert('copied');
});

https://jsfiddle.net/pg4f0usx/

Replication steps:

• Run the fiddle
• Click on the draggable element and press Ctrl-C - nothing will happen
• Click on the non-draggable element and press Ctrl-C - the 'copied' alert will pop up
• Click on the draggable element and press Ctrl-C - the 'copied' alert will pop up

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?

Answer 1

You can attach the copy event in the window so that you don't need to click on that div. But you need to be in that window (at least clicking somewhere)

    window.addEventListener('copy', (e) => {
        e.preventDefault();
        e.clipboardData.setData('text/plain', 'copied data');
      alert('copied');
    });

<div id='copy'>
      <div draggable='true'>Draggable</div>
      <div>Non-draggable</div>
</div>
<div id='outro'>
  <span style='background-color:gray; align-items: center; padding:50px; padding-top: 0px; '>If you are anywhere in the page (like here)  it will copy with CTRL + C</span>
</div>