按钮的点击复制事件

情景再现

假设我们现在有一个按钮，我们的需求是点击这个按钮去复制代码块中的内容
那么我们需要下面三个步骤才能实现它

• 监听点击事件
• 获取代码块的内容
• 复制到剪贴板

添加一个工具类

这个按钮自然的有一个a标签，因此我们只需要去监听这个a标签的点击事件即可。

export default () => {
  $('pre code a ').click((e) => {
    copyContent(e.currentTarget.nextElementSibling.innerText)
  })
}

通过e.currentTarget.nextElementSibling.innerText我们拿到了代码块中的内容并传给copyContent函数去处理

在这个函数中添加一个copy事件的监听器以及一个事件方法save,然后我们手工的去执行一个复制事件，也同时调用了save方法，将内容赋值到copyContent,事件执行完毕之后，移除监听器，现在我们简易复制按钮就做好了。

function copyContent(content) {
  document.addEventListener('copy', save) // 监听浏览器copy事件
  document.execCommand('copy') // 执行copy事件，这时监听函数会执行save函数。
  document.removeEventListener('copy', save) // 移除copy事件

  // 保存方法
  function save(e) {
    e.clipboardData.setData('text/plain', content) // 剪贴板内容设置
    e.preventDefault()
  }
}

体验一下

地址：https://siques.cn/n/77