javascript - 除非先单击同级元素，否则无法复制可拖动元素

Question

如果绑定(bind)了复制事件的元素具有内部可拖动的元素，则不会触发复制事件，除非您首先单击不可拖动的兄弟。
这是代码:

<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/
复制步骤:

运行 fiddle

单击可拖动元素并按 Ctrl-C - 什么都不会发生

单击不可拖动元素并按 Ctrl-C - 将弹出“已复制”警报

单击可拖动元素并按 Ctrl-C - 将弹出“已复制”警报

这在 FireFox 和 Chrome 中都会发生。有没有办法避免需要单击不可拖动元素才能在父元素上触发复制事件？

Answer 1

您可以在窗口中附加复制事件，这样您就不需要单击 div .但是你需要在那个窗口中(至少点击某个地方)

    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>