Canvas的copy/paste事件未触发，求自定义剪贴板功能解决方案

以下是几个核心问题点和对应的修复方案：

1. Canvas默认不可聚焦，导致事件无法触发 #

剪贴板事件（copy/paste）需要元素处于可聚焦状态，但HTML Canvas默认不支持聚焦。你需要给Canvas添加tabindex属性，让它能接收焦点：

private setupClipboardEvents(canvasElement: HTMLCanvasElement) {
    // 给canvas设置tabindex，使其可聚焦
    canvasElement.setAttribute('tabindex', '0');
    // 主动让canvas获得焦点，确保事件能触发
    canvasElement.focus();

    canvasElement.addEventListener('copy', function(e) {
        e.preventDefault(); // 阻止浏览器默认复制行为，确保自定义内容生效
        // @ts-ignore
        e.clipboardData.setData('text/plain', 'test');
    });
    canvasElement.addEventListener('paste', e => {
        e.preventDefault(); // 阻止默认粘贴行为
        // @ts-ignore
        const clipboardData = e.clipboardData.getData('text/plain');
        console.debug(`Paste event triggered. Data length: ${clipboardData.length} characters`);
    });
}

2. 改用Document级别的事件监听（适配全局快捷键场景） #

如果用户是通过全局快捷键（比如Ctrl+C/V）触发剪贴板操作，而非在Canvas内选中内容，直接监听document的事件会更可靠：

private setupClipboardEvents() {
    document.addEventListener('copy', function(e) {
        e.preventDefault();
        // @ts-ignore
        e.clipboardData.setData('text/plain', 'test');
    });
    document.addEventListener('paste', e => {
        e.preventDefault();
        // @ts-ignore
        const clipboardData = e.clipboardData.getData('text/plain');
        console.debug(`Paste event triggered. Data length: ${clipboardData.length} characters`);
    });
}

3. 绑定Konva Stage就绪事件替代setTimeout #

因为使用Konva，建议直接监听Stage的contentReady事件，确保Canvas完全渲染后再绑定事件，比setTimeout(0)更稳定：

// 假设你已初始化Konva Stage实例
const stage = new Konva.Stage({
    container: container,
    width: 800,
    height: 600
});

stage.on('contentReady', () => {
    const canvasElement = stage.container().querySelector('canvas');
    if (canvasElement) {
        this.setupClipboardEvents(canvasElement as HTMLCanvasElement);
    } else {
        console.error('Canvas not found');
    }
});

4. 检查浏览器交互限制 #

部分浏览器要求剪贴板操作必须在用户主动交互（比如点击、按键）的上下文内执行。测试时先点击Canvas获得焦点，再触发复制/粘贴操作。

内容的提问来源于stack exchange，提问作者RookieGuy