JS剪贴板复制仅首个div生效 事件传播问题排查

三个问题共同导致故障，其中确实包含事件传播相关的问题：

• HTML规范要求同一页面内id属性值必须唯一，你的代码里存在多组重复ID：2个容器都设了id="btn"、3个诗歌div都设了id="bottone"。document.getElementById()只会返回页面中第一个匹配ID的元素，所以不管点哪个复制按钮，永远只能选中第一个诗歌模块。
• 复制函数逻辑存在多处错误：调用CopyToClipboard时传了2个参数，但函数定义只接收1个参数；作者元素用的是class="author"，根本不存在id="author"的元素；最后弹窗拼接的是Range对象本身，不是作者的文本内容，哪怕选中了元素也只会弹出[object Range]。
• 事件冒泡未做拦截：复制按钮放在绑定了全局点击切页、换背景的容器内部，点击按钮时事件会向上冒泡到父容器，触发切页逻辑——点复制的瞬间就会切到下一张诗歌，自然看不到当前模块的复制效果。

1. 删除所有重复ID，统一用class做元素选择，从根源避免ID匹配错误
2. 给复制按钮的点击事件加冒泡拦截，同时在父容器的全局点击事件里加判断，点复制按钮时不触发切页、换背景逻辑
3. 重写复制逻辑：点击按钮时直接关联查找当前所属诗歌模块的文本、作者信息，不用靠ID传参定位
4. 用标准的现代剪贴板API替换已被废弃的document.execCommand('copy')，提升复制稳定性

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container{
  position: relative;
  width: auto;
  height: 700px;
}

.mySlides{
  position: absolute;
  padding: 15px; 
  top: 50%; 
  left: 50%;
  transform: translate(-50%,-50%);
  min-width: 50px;
  min-height: 50px;
}

body {
  transition: background-color 0.5s ease;
}

p {
  font-size: 30px;
  text-align: left;
  color:white;
  font-family: 'Baskerville';
}
 
.author {
  padding-top:50px !important;
  text-align: right;
}

button {
  padding: 8px 16px;
  cursor: pointer;
}
</style>
</head>

<body>
<div class="totale container">
  <div class="mySlides">
    <p class="poem-text">Text1</p>
    <p class="author">Author1</p>
    <button type="button" class="copy-btn">Copy text</button>
  </div>
  <div class="mySlides">
    <p class="poem-text">Text2</p>
    <p class="author">Author2</p>
    <button type="button" class="copy-btn">Copy text</button>
  </div>
  <div class="mySlides">
    <p class="poem-text">Text3</p>
    <p class="author">Author3</p>
    <button type="button" class="copy-btn">Copy text</button>
  </div>
</div>

<script>
// 轮播切页、换背景逻辑
var slideIndex = 1;
showSlides(slideIndex);

const slideContainer = document.querySelector(".container");
const body = document.body;
const colors = ['#3141AD','#FF9964','#00BAA4','#DF4D44','#514399','#015CCA']
body.style.backgroundColor = colors[0]

slideContainer.addEventListener('click',(e) => {
  // 点击复制按钮时不触发切页换背景
  if(e.target.classList.contains('copy-btn')) return;
  changeBackground();
  plusSlides(1);    
});

function changeBackground(){
  const colorsIndex = Math.floor(Math.random()*colors.length)
  body.style.backgroundColor = colors[colorsIndex]
}

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";  
}

// 复制逻辑
document.querySelectorAll('.copy-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 阻止事件冒泡，避免触发父容器的切页逻辑
    e.stopPropagation();
    // 定位当前按钮所属的诗歌模块
    const currentSlide = this.closest('.mySlides');
    // 提取诗歌内容、作者名
    const poemContent = currentSlide.querySelector('.poem-text').innerText;
    const authorName = currentSlide.querySelector('.author').innerText;
    // 调用剪贴板API完成复制
    navigator.clipboard.writeText(poemContent).then(() => {
      alert(`诗歌已复制！${authorName} 会感谢你的分享`);
    }).catch(err => {
      console.log('复制失败:', err);
    })
  })
})
</script>
</body>
</html>

• 移除了所有重复ID，元素全部通过class选择，符合HTML规范
• 双重拦截事件冒泡：父容器点击事件判断点击目标、按钮点击事件主动阻止冒泡，彻底解决点复制误触发切页的问题
• 复制逻辑不再依赖ID传参，通过DOM节点的父子关联直接拿当前模块的内容，不会出现找错元素的问题
• 替换废弃的复制接口，复制成功率更高，不需要手动创建选区、清除选区，代码更简洁

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