javascript - How to use removeEventListener for clipboardData? - Stack Overflow

admin管理员组

文章数量:1405554

Page had the button which copies text to clipboard with code:

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

But after at use, this code Ctrl+C doesn't work. I need removeEventListener something like:

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.
        });
    }
}

How to go back to standard behavior for clipboard when text from a specific field copied?

Page had the button which copies text to clipboard with code:

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

But after at use, this code Ctrl+C doesn't work. I need removeEventListener something like:

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.
        });
    }
}

How to go back to standard behavior for clipboard when text from a specific field copied?

• javascript

Share Improve this question Follow asked Aug 14, 2018 at 14:20 PavelPavel 2,10166 gold badges4444 silver badges7575 bronze badges 3

• Possible duplicate of event.clipboardData.setData in copy event – Feras Al Sous Commented Aug 14, 2018 at 14:22
• 3 To remove the event listener, save the handler as a seperate function. You have to use the same function in both addEventListener and removeEventListener. const doCopy = (e: .... ) => ... and .addEventListener( 'copy', doCopy ); and .removeEventListener( 'copy', doCopy ); Two functions, even if they have exactly the same code inside, are considered different functions. – Shilly Commented Aug 14, 2018 at 14:27
• @Shilly yes this work, thank You. Plese add your ment as an answer for the adoption. – Pavel Commented Aug 14, 2018 at 14:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

The problem is that you're trying to remove the function by writing it again. In JS, two function, even with exactly the same code, are still different functions.

So you need to have a reference to the function to be able to use it in both calls:

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 );
}

}

本文标签： javascriptHow to use removeEventListener for clipboardDataStack Overflow