同一页面存在两个相同ID的按钮，这会是功能异常的原因吗？

重复ID是否会导致移动端失效？ #

是的，重复ID绝对是问题根源。HTML规范明确要求页面内的ID必须唯一，浏览器通过getElementById()等方法查找元素时，只会返回第一个匹配的ID元素。

插件的JS逻辑大概率给原按钮绑定了点击/触摸事件，移动端通常会额外处理touchstart这类触摸事件。你复制的按钮虽然结构一致，但因为ID重复，插件的事件只绑定在了原按钮上——哪怕原按钮被display:none隐藏，浏览器依然只会识别第一个ID元素，复制的按钮拿不到事件绑定，自然在移动端失效。

无需修改插件代码的解决办法 #

方案1：移动原按钮而非复制（推荐） #

直接把原按钮从默认位置移动到目标位置，既保留唯一ID，也不会丢失原有事件绑定。用一段简单的JS实现：

document.addEventListener('DOMContentLoaded', function() {
  // 替换成你的按钮ID和目标容器ID
  const originalBtn = document.getElementById('plugin-button-id');
  const targetContainer = document.getElementById('your-target-container');
  
  if (originalBtn && targetContainer) {
    // 把原按钮剪切到目标容器里
    targetContainer.appendChild(originalBtn);
  }
});

这种方法完全不需要复制元素，从根源避免ID重复，所有插件绑定的事件都会跟着元素走，PC和移动端都能正常工作。

方案2：复制按钮后手动同步事件 #

如果必须复制按钮，给复制的按钮换个新ID，然后通过JS让它触发原按钮的逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const originalBtn = document.getElementById('plugin-button-id');
  // 给复制的按钮设置新ID
  const copiedBtn = document.getElementById('copied-button-new-id');
  
  if (originalBtn && copiedBtn) {
    // 同步点击事件
    copiedBtn.addEventListener('click', function(e) {
      e.preventDefault();
      originalBtn.click();
    });
    // 同步移动端触摸事件
    copiedBtn.addEventListener('touchstart', function(e) {
      e.preventDefault();
      originalBtn.dispatchEvent(new Event('touchstart'));
      originalBtn.click();
    });
  }
});

这样复制的按钮点击时，实际触发原按钮的点击逻辑，完美复用插件功能，同时避免ID冲突。

方案3：用CSS定位原按钮到目标位置 #

如果页面布局允许，直接通过CSS把原按钮定位到你想要的位置，不用复制也不用移动DOM：

#plugin-button-id {
  position: absolute;
  top: 50px; /* 替换成目标位置的top值 */
  left: 20px; /* 替换成目标位置的left值 */
  z-index: 999; /* 确保按钮在顶层 */
}

这种方法适合布局简单的场景，不用写JS，直接靠CSS调整位置。

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