copy使用方法,解决点击两次复制成功

import Clipboard from 'clipboard';

export default function handleClipboard(event, text) {
  const clipboard = new Clipboard(event.target, {
    text: () => text
  });
  clipboard.on('success', () => {
    console.log('success');
    clipboard.destroy();
  });
  clipboard.on('error', () => {
    console.log('error');
    clipboard.destroy();
  });
  clipboard.onClick(event);
}

### 防止 Clipboard.js Success 回调函数触发两次 为了防止 `clipboard.js` 的 success 回调函数被多次触发,可以采取以下几种策略: #### 1. 使用标志位控制执行次数 通过设置一个全局变量作为标志位,在第一次成功复制后将其置为 true 并在后续不再允许回调被执行。 ```javascript let hasBeenCalled = false; new ClipboardJS('.btn', { text: function(trigger) { return trigger.getAttribute('data-copy-text'); } }); document.addEventListener('copy', function(event){ if (!hasBeenCalled) { event.preventDefault(); event.clipboardData.setData('text/plain', document.querySelector('#input').value); console.log("Copied!"); hasBeenCalled = true; } }); ``` 这种方法简单有效,但是需要注意清理逻辑以支持多处独立使用的场景[^1]。 #### 2. 移除事件监听器 另一种更优雅的方式是在首次触发之后立即移除该事件监听器。这可以通过定义自定义的剪贴板实例并重写其默认行为实现。 ```javascript class SingleUseClipboard extends ClipboardJS { constructor(selector, options) { super(selector, options); this.listenerCount = {}; ['success','error'].forEach((type)=>{ let originalMethod = this[type]; this[type] = (...args)=>{ const target = args[args.length - 1].trigger || args[0]; if(!this.listenerCount[target.id]){ this.listenerCount[target.id]=0; } if(this.listenerCount[target.id]<1){ originalMethod.apply(this,args); this.listenerCount[target.id]++; // Remove listener after first invocation setTimeout(()=>{ delete this.listenerCount[target.id]; },0); } }; }); } } // Usage example: const singleUseClipBoardInstance = new SingleUseClipboard('.btn'); singleUseClipBoardInstance.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }); ``` 这种方式不仅解决了重复触发的问题,而且保持了良好的封装性和可维护性[^2]. #### 3. 利用防抖(debounce)/节流(throttle)技术 对于某些情况下可能存在的快速连续点击情况,还可以引入防抖或节流机制来进一步优化用户体验。 ```javascript function debounce(fn, delay) { var timer; return function () { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, arguments), delay); }; } var clipboard = new ClipboardJS('.btn'); clipboard.on('success', debounce(function(e) { console.log('Copy succeeded!'); }, 500)); ``` 此方法适用于需要延迟响应的应用场合,确保即使短时间内发生多次交互也只会处理一次[^3].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

农夫_山泉水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值