如何通过JavaScript拦截按钮点击？动态函数场景下的解决方案

因为无法修改原有动态生成的按钮和selectBillingAddress{Id}函数，我们可以通过事件委托拦截按钮的点击事件，在执行原跳转逻辑前插入自定义条件检查。

实现步骤 #

1. 定位目标按钮的共同父容器（优先使用具体容器而非body，提升性能），监听其click事件。
2. 判断点击目标是否为地址选择按钮：通过检查按钮的onclick属性是否匹配selectBillingAddress开头的动态函数命名规则。
3. 阻止原onclick事件的执行，先完成自定义条件检查。
4. 条件通过则调用原函数，不通过则执行自定义处理逻辑。

示例代码 #

// 替换为地址按钮实际的父容器选择器，比如#address-buttons-wrap
const parentContainer = document.querySelector('#address-buttons-wrap') || document.body;

parentContainer.addEventListener('click', function(e) {
  const btn = e.target;
  // 验证是否为目标地址选择按钮
  if (btn.tagName === 'BUTTON' && btn.onclick) {
    const funcStr = btn.onclick.toString();
    const funcMatch = funcStr.match(/selectBillingAddress\d+/);
    if (funcMatch) {
      // 阻止原onclick事件执行
      e.stopImmediatePropagation();
      
      // 执行自定义条件检查
      const isConditionPassed = checkMyCustomRules();
      
      if (isConditionPassed) {
        // 条件通过，调用原函数，保持this指向按钮
        window[funcMatch[0]].call(btn);
      } else {
        // 条件不满足，自定义处理（比如提示用户）
        console.log('自定义条件未通过，无法跳转');
        // alert('请完成XXX操作后再继续');
      }
    }
  }
});

// 自定义条件检查函数，替换为你的实际逻辑
function checkMyCustomRules() {
  // 示例：检查某个复选框状态、表单字段是否合法等
  const shipToSame = document.querySelector('#ShipToSameAddress')?.checked;
  const someFieldValid = document.querySelector('#some-input')?.value.trim() !== '';
  return shipToSame && someFieldValid;
}

关键说明 #

• 事件委托能覆盖动态生成的元素，无需提前知道所有按钮的ID或函数名。
• 使用stopImmediatePropagation确保原onclick绑定的函数不会被执行，避免逻辑冲突。
• 通过call(btn)保持原函数内的this指向按钮，避免原逻辑因this丢失出错。

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