除非首先单击兄弟，否则无法复制可拖动元素

Question

如果一个绑定了复制事件的元素有一个内部可拖动的元素，复制事件不会被触发，除非您先点击一个不可拖动的同级元素。

代码如下：

<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 - 'copied' 警报将弹出
单击可拖动元素并按 Ctrl-C - 'copied' 警报将弹出

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

Answer 1

您可以在 window 中附加复制事件，这样您就不需要点击那个 div。但你需要在 window（至少点击某处）

    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>

除非首先单击兄弟，否则无法复制可拖动元素

Cannot copy draggable element unless sibling is clicked first

javascript

html

copy-paste