使用this获取元素innerText时的作用域问题咨询

一、为什么复制内容是undefined？ #

确实是**this的作用域问题**：

• 内联onclick写法中，this直接指向触发点击事件的div卡片，因此能正确获取innerText。
• 当你用el.setAttribute("onclick", "copyText()")调用函数时，copyText在全局作用域执行，此时函数内的this指向window对象，而window.innerText不存在，所以返回undefined。

二、修复this指向的几种方法 #

方法1：调用时传递元素引用 #

修改内联调用逻辑，把当前点击的元素作为参数传给copyText：

// 在createCard函数中替换原有的onclick绑定行
el.setAttribute("onclick", "copyText(this)");

// 调整copyText函数接收元素参数
function copyText(element) {
  navigator.clipboard.writeText(element.innerText);
}

方法2：使用addEventListener绑定事件（推荐） #

抛弃内联事件写法，用更规范的事件监听方式，这种方式会自动将this绑定到触发事件的元素：

// 在createCard函数中替换原有的setAttribute行
el.addEventListener('click', copyText);

// copyText函数无需修改，此时this直接指向点击的div
function copyText() {
  navigator.clipboard.writeText(this.innerText);
}

三、适配移动端的copyText函数扩展 #

移动端部分浏览器对navigator.clipboard支持有限（比如部分Android内置浏览器、旧版iOS Safari），需要加入降级逻辑，用传统的选中复制方案作为备选：

// 适配版copyText（对应方法1的传参写法）
function copyText(element) {
  const text = element.innerText;
  // 优先使用现代Clipboard API
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text)
      .then(() => {
        console.log('复制成功');
        // 可在此添加移动端提示，比如自定义toast
      })
      .catch(err => {
        console.error('Clipboard API失败，尝试降级方案:', err);
        fallbackCopy(text);
      });
  } else {
    fallbackCopy(text);
  }
}

// 降级复制函数（兼容旧浏览器）
function fallbackCopy(text) {
  const tempTextarea = document.createElement('textarea');
  tempTextarea.value = text;
  // 隐藏临时textarea，避免干扰页面
  tempTextarea.style.position = 'absolute';
  tempTextarea.style.left = '-9999px';
  tempTextarea.style.top = '-9999px';
  document.body.appendChild(tempTextarea);
  
  // 选中并执行复制
  tempTextarea.select();
  document.execCommand('copy');
  
  document.body.removeChild(tempTextarea);
  console.log('降级方案复制成功');
}

如果用addEventListener的绑定方式，只需调整copyText函数为：

function copyText() {
  const text = this.innerText;
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text)
      .then(() => console.log('复制成功'))
      .catch(err => {
        console.error('Clipboard API失败，尝试降级:', err);
        fallbackCopy(text);
      });
  } else {
    fallbackCopy(text);
  }
}

额外提示 #

• 移动端复制必须由用户主动触发（比如点击事件），浏览器会拦截非用户交互触发的复制操作。
• 本地开发用localhost可正常使用Clipboard API，但线上部署需确保站点使用HTTPS，否则API可能失效。

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