如何仅通过JS实现无onclick属性、不可修改HTML的按钮仅可点击一次

你可以通过选择器定位按钮后绑定单次触发的点击事件实现需求，无需修改原有HTML代码，两种常用方案如下：

方案1：点击后禁用按钮（适配表单提交场景，防止重复提交） #

直接通过按钮的name属性定位（匹配你给出的按钮代码，定位准确性最高），点击后立刻禁用按钮，从UI和交互层面双重防止二次触发：

// 等待DOM加载完成后执行，避免按钮未渲染导致找不到元素
document.addEventListener('DOMContentLoaded', function() {
  const buyNowBtn = document.querySelector('button[name="add-to-cart"]');
  if (!buyNowBtn) return; // 按钮不存在时直接退出，避免报错

  buyNowBtn.addEventListener('click', function() {
    // 点击后禁用按钮
    this.disabled = true;
    // 若需要修改禁用态的样式可以在这里加自定义类，比如 this.classList.add('disabled-style')
  }, { once: true }); // 事件仅触发一次，自动移除监听器，双重保障
});

方案2：仅限制事件触发一次，不修改按钮状态（适配不需要改变按钮视觉样式的场景） #

如果不希望按钮变成禁用态的外观，可以通过触发后移除事件监听器的方式实现仅可点击一次：

document.addEventListener('DOMContentLoaded', function() {
  const buyNowBtn = document.querySelector('button.single_add_to_cart_button');
  if (!buyNowBtn) return;

  function handleBuyClick() {
    // 这里可以写你的自定义业务逻辑，无额外逻辑可省略
    console.log('按钮触发一次');
    
    // 执行完成后移除事件监听器，后续点击不再生效
    buyNowBtn.removeEventListener('click', handleBuyClick);
  }

  buyNowBtn.addEventListener('click', handleBuyClick);
});

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