只有在点击兄弟元素后才能复制可拖动的元素。

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 - 弹出“已复制”提示框
• 点击可拖动元素并按下Ctrl-C - 弹出“已复制”提示框

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

- Schiem

---

在我看来，当你点击可拖动元素时，很明显你想把它拖到别的地方，而不是选择它的内容。 - Dani

不过这是不一致的 - 如果您单击不可拖动的元素，则可拖动的元素开始允许您复制。 - Schiem

我不这么认为，也许选择光标停留在不可拖动的位置，你可以使用Ctrl+C复制。粘贴已复制的值，然后你会看到。 - Dani

我正在使用自定义复制事件 - 我实际上并没有尝试从任何元素中复制任何数据。https://jsfiddle.net/mtpxf9ry/ - Schiem

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>

- testing_22

---

虽然这并没有直接解决问题（如果您需要在页面的其他位置复制文本，那么您可能会遇到问题），但是我设置了我的复制方式，可以使用文档焦点来检查他们尝试复制的内容，所以这对我有效。 - Schiem