如何在clipboardData上使用removeEventListener？

Question

页面上有一个按钮，可以将文本复制到剪贴板，代码如下：

export class ClipboardService {
    static copyToClipboard(toCopy: string) : void {
        document.addEventListener('copy', (e : ClipboardEvent) => {
            e.clipboardData.setData('text/plain', toCopy);
            e.preventDefault();
        });
        document.execCommand('copy');
    }
} 

但是在使用之后，这个代码Ctrl+C不起作用。我需要像这样的removeEventListener：

export class ClipboardService {
    static copyToClipboard(toCopy: string) : void {
        document.addEventListener('copy', (e : ClipboardEvent) => {
            e.clipboardData.setData('text/plain', toCopy);
            e.preventDefault();
        });
        document.execCommand('copy');

        document.removeEventListener('copy', (e : ClipboardEvent) => {
            e.clipboardData.??? // I stuck in this place.
        });
    }
}

如何在复制来自特定字段的文本时返回到剪贴板的标准行为？

Answer 1

问题是您试图通过重新编写函数来删除该函数。在JS中，即使代码完全相同，两个函数仍然是不同的函数。

因此，您需要有一个对函数的引用，以便能够在两个调用中使用它：

export class ClipboardService {
static copyToClipboard(toCopy: string) : void {
    const create_copy = (e : ClipboardEvent) => {
        e.clipboardData.setData('text/plain', toCopy);
        e.preventDefault();
    };
    document.addEventListener('copy', create_copy );
    document.execCommand('copy');
    document.removeEventListener('copy', create_copy );
}

}