JQuery onClick事件函数参数传递异常问题及解决问询

问题 #

在为可复用的点击事件函数传递参数时遇到以下异常：

• 存在fctClearAllInputs函数，用于清空输入框，需根据调用来源决定是否显示确认弹窗，参数默认值为false。
• 在$("#idBtnCallClearFunction")的点击事件中直接调用fctClearAllInputs(true)，参数能被正确解析为true。
• 在$(".clearAllInputs")的点击事件中直接绑定fctClearAllInputs时，参数会变成事件对象，默认值false被忽略，且该对象在JS中被判定为真值。
• 若改为绑定fctClearAllInputs(false)，参数能正确设为false，但对应按钮失去点击响应。

原因分析 #

1. 直接绑定函数的参数异常：
   当使用$(".clearAllInputs").on("click", fctClearAllInputs)绑定事件时，jQuery会自动将**事件对象（Event Object）**作为第一个参数传递给绑定的函数，因此blnClearWithoutConfirmation接收的不是默认值false，而是这个事件对象。由于所有对象在JS中转换为布尔值都是true，导致函数逻辑判断出错。

2. 绑定fctClearAllInputs(false)无响应：
   写$(".clearAllInputs").on("click", fctClearAllInputs(false))时，并非绑定函数，而是立即执行了fctClearAllInputs(false)，并将函数的返回值（此处无返回值，即undefined）绑定为点击事件处理函数。undefined作为事件处理函数不会产生任何响应，因此按钮点击后无反应。

正确传递参数的方法 #

方法1：匿名函数包裹调用（推荐，直观易维护） #

在匿名函数中手动调用目标函数并传入指定参数，如需使用事件对象也可在此接收：

$(".clearAllInputs").on("click", function(event) {
  // 可选：使用event对象做额外处理
  fctClearAllInputs(false);
});

方法2：利用bind()预先绑定参数 #

通过bind()预先绑定函数参数，同时保留事件对象的传递（事件对象会作为后续参数传入函数）：

// 第一个参数为this指向（无需指定时传null即可），第二个参数为要绑定的函数参数
$(".clearAllInputs").on("click", fctClearAllInputs.bind(null, false));

若需要在函数中使用事件对象，需在形参中添加对应参数：

const fctClearAllInputs = function (blnClearWithoutConfirmation = false, event) {
  // 可选：使用event对象
  // ...
};

方法3：通过data-*属性传递参数（适合参数与DOM元素关联的场景） #

给DOM元素添加data-*属性存储参数，在事件处理函数中读取：

HTML修改：

<button class="clearAllInputs" data-confirm="false">Clear All Inputs #1</button>

JS修改：

$(".clearAllInputs").on("click", function() {
  const shouldSkipConfirm = $(this).data("confirm") === false;
  fctClearAllInputs(shouldSkipConfirm);
});

完整修正代码示例 #

JavaScript #

$(document).ready(function() {
  const fctClearAllInputs = function (blnClearWithoutConfirmation = false) {
    console.log(`blnClearWithoutConfirmation: '${JSON.stringify(blnClearWithoutConfirmation)}'`);
    console.log(`Convert to bool: '${!!blnClearWithoutConfirmation}'`);

    if (!!blnClearWithoutConfirmation) {
      console.log("直接清空输入框");
      // 执行清空逻辑
    } else {
      console.log("显示确认弹窗后清空");
      // 执行弹窗及后续清空逻辑
    }
  };

  // 使用匿名函数包裹调用（推荐写法）
  $(".clearAllInputs").on("click", function() {
    fctClearAllInputs(false);
  });

  // 按钮调用函数并执行其他逻辑
  $("#idBtnCallClearFunction").on("click", function() {
    // 执行前置操作
    console.log("执行前置操作");
    
    fctClearAllInputs(true);
    
    // 执行后置操作
    console.log("执行后置操作");
  });
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button class="clearAllInputs">Clear All Inputs #1</button> &nbsp;&nbsp;&nbsp;
<button class="clearAllInputs">Clear All Inputs #2</button>

<br/><br/><br/><br/>

<button id="idBtnCallClearFunction">
  Call Clear Function
</button>

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