如何阻止Shopify Dawn主题的“立即购买”按钮跳转至结账页？

你的代码失效的核心原因：.shopify-payment-button只是按钮的外层容器，实际触发跳转的是容器内部的<button>元素（通常类名为.shopify-payment-button__button），而且Shopify的结账逻辑绑定在表单提交事件上，不是容器的点击事件。另外，Shopify内置的事件监听优先级可能高于你的代码，导致preventDefault未生效。

下面是几种可行的解决方案：

方案1：监听表单的submit事件（推荐） #

立即购买按钮本质是表单的提交按钮，直接拦截表单提交更可靠：

// 定位支付按钮所在的表单
const checkoutForm = document.querySelector('.shopify-payment-button form');

if (checkoutForm) {
  checkoutForm.addEventListener('submit', function(event) {
    // 阻止表单提交
    event.preventDefault();
    event.stopPropagation();

    // 这里执行你需要的任务
    console.log('执行自定义任务...');

    // 【可选】如果任务完成后需要继续跳转结账，手动提交表单
    // checkoutForm.submit();
  });
}

方案2：监听实际按钮的点击事件（捕获阶段） #

如果要拦截按钮点击，需要找到真实的按钮元素，并在事件捕获阶段绑定监听（确保先于Shopify的事件执行）：

// 定位到实际的支付按钮
const realPaymentButton = document.querySelector('.shopify-payment-button__button');

if (realPaymentButton) {
  // 第三个参数true表示在捕获阶段触发事件
  realPaymentButton.addEventListener('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation(); // 阻止其他同元素的事件监听执行

    // 执行你的自定义任务
    console.log('处理自定义逻辑');

    // 【可选】任务完成后手动触发结账
    // realPaymentButton.closest('form').submit();
  }, true);
}

方案3：处理动态加载的按钮 #

如果按钮是页面加载后动态渲染的（比如产品页变体切换后重新加载按钮），需要用MutationObserver监听元素出现：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length === 0) return;

    const targetButton = document.querySelector('.shopify-payment-button__button');
    const targetForm = document.querySelector('.shopify-payment-button form');

    // 给按钮绑定监听（避免重复绑定）
    if (targetButton && !targetButton.dataset.hasCustomListener) {
      targetButton.dataset.hasCustomListener = 'true';
      targetButton.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        // 执行任务
        console.log('动态元素的自定义任务');

        // 可选：继续结账
        // targetForm.submit();
      }, true);
    }

    // 给表单绑定submit监听
    if (targetForm && !targetForm.dataset.hasSubmitListener) {
      targetForm.dataset.hasSubmitListener = 'true';
      targetForm.addEventListener('submit', (e) => {
        e.preventDefault();
        e.stopPropagation();

        // 执行任务
        console.log('动态表单的自定义任务');

        // 可选：继续结账
        // targetForm.submit();
      });
    }
  });
});

// 监听整个页面的DOM变化
observer.observe(document.body, { childList: true, subtree: true });

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