iPhone端点击复制按钮触发页面跳转问题求助（疑因select()调用）

问题：在iPhone设备上运行以下代码时，点击copy按钮完成复制后会出现页面跳转（Android设备无此问题），复制功能本身正常，推测跳转由select()方法触发。

原代码示例：

document.getElementById('copy').addEventListener('click', function(e) {
  var data = 'fooo'
  var dummy = document.createElement("input");
  dummy.setAttribute("id", "copy-url");
  document.body.appendChild(dummy);
  document.getElementById("copy-url").value = data;
  dummy.select();
  try {
    document.execCommand("copy");
  } catch (er) {}
  document.body.removeChild(dummy);
})

<button type="button" id="copy"> copy me</button>

解决方法 #

在点击事件中阻止默认行为，同时优化DOM操作逻辑：

修改后的代码：

document.getElementById('copy').addEventListener('click', function(e) {
  // 阻止浏览器默认行为，解决iPhone跳转问题
  e.preventDefault();
  
  var data = 'fooo';
  var dummy = document.createElement("input");
  // 无需设置ID，直接使用变量操作元素
  document.body.appendChild(dummy);
  dummy.value = data;
  dummy.select();
  try {
    document.execCommand("copy");
  } catch (er) {}
  document.body.removeChild(dummy);
})

<button type="button" id="copy"> copy me</button>

说明 #

1. 阻止默认行为：通过e.preventDefault()可以拦截iPhone上因select()触发的浏览器默认跳转/滚动行为，这是解决问题的核心。
2. 优化DOM操作：创建临时input元素后直接用变量dummy操作，省去了通过getElementById查找的步骤，提升代码效率的同时避免潜在的ID冲突问题。

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