如何避免jQuery绑定第三方按钮事件时触发无限循环并保留原有监听？

问题场景 #

需要在用户点击第三方页面的「继续」按钮时捕获表单数据，但该按钮已绑定2个原生点击事件监听器。现有实现存在矛盾：

• 移除自身绑定的事件监听器，会导致原有第三方事件无法触发
• 直接触发按钮点击事件，会引发无限循环

可行解决方案 #

方案1：利用事件捕获优先级提前执行逻辑 #

通过将自定义监听器绑定在事件捕获阶段，确保数据捕获逻辑先执行，同时阻止后续委托事件干扰，但不影响按钮自身绑定的原有监听器：

$(document).ready(function() {
  const captureFormData = () => {
    const inputs = {
      fName: document.getElementById("txtFName").value,
      lName: document.getElementById("txtLName").value,
      ssn1: document.getElementById("txtSSN1").value,
      ssn2: document.getElementById("txtSSN2").value,
      ssn3: document.getElementById("txtSSN3").value,
      phone: document.getElementById("txtHomePhone").value
    };
    const jsonData = JSON.stringify(inputs);
    console.log("inputs: ", jsonData);
  };

  const continueButtonHandler = function(event) {
    // 阻止其他同阶段的委托监听器执行，不影响元素自身的原有监听器
    event.stopImmediatePropagation();
    captureFormData();
    // 无需调用preventDefault，除非原有事件依赖按钮默认行为（如表单提交）
  };

  // 第三个参数设为true，绑定到事件捕获阶段
  $(document).on("click", ".div-continue > .div-continue-button", true, continueButtonHandler);
});

方案2：临时移除委托监听器，触发后重新绑定 #

先移除自定义的委托监听器，再触发按钮原生点击（此时不会触发自定义监听器），最后异步恢复监听器，保证后续点击仍能捕获数据：

$(document).ready(function() {
  const captureFormData = () => {
    const inputs = {
      fName: document.getElementById("txtFName").value,
      lName: document.getElementById("txtLName").value,
      ssn1: document.getElementById("txtSSN1").value,
      ssn2: document.getElementById("txtSSN2").value,
      ssn3: document.getElementById("txtSSN3").value,
      phone: document.getElementById("txtHomePhone").value
    };
    const jsonData = JSON.stringify(inputs);
    console.log("inputs: ", jsonData);
  };

  const continueButtonHandler = function(event) {
    event.preventDefault();
    captureFormData();
    
    const $btn = $(this);
    // 移除当前自定义委托监听器
    $(document).off("click", ".div-continue > .div-continue-button", continueButtonHandler);
    
    // 触发原生点击，仅执行按钮自身绑定的原有事件
    this.click();
    
    // 异步重新绑定监听器，避免阻塞原有事件执行
    setTimeout(() => {
      $(document).on("click", ".div-continue > .div-continue-button", continueButtonHandler);
    }, 0);
  };

  $(document).on("click", ".div-continue > .div-continue-button", continueButtonHandler);
});

方案3：用临时标记规避循环 #

给按钮添加临时状态标记，触发自定义逻辑后，通过标记跳过后续的循环触发：

$(document).ready(function() {
  const captureFormData = () => {
    const inputs = {
      fName: document.getElementById("txtFName").value,
      lName: document.getElementById("txtLName").value,
      ssn1: document.getElementById("txtSSN1").value,
      ssn2: document.getElementById("txtSSN2").value,
      ssn3: document.getElementById("txtSSN3").value,
      phone: document.getElementById("txtHomePhone").value
    };
    const jsonData = JSON.stringify(inputs);
    console.log("inputs: ", jsonData);
  };

  const continueButtonHandler = function(event) {
    // 检测标记，若是自定义触发则跳过逻辑
    if ($(this).data("is-self-triggered")) {
      $(this).removeData("is-self-triggered");
      return;
    }

    event.preventDefault();
    captureFormData();
    
    // 设置标记，防止循环
    $(this).data("is-self-triggered", true);
    // 触发按钮点击，执行原有事件
    $(this).click();
  };

  $(document).on("click", ".div-continue > .div-continue-button", continueButtonHandler);
});

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