如何在htmx的hx-on中传递函数以读取config-request事件？

htmx的hx-on属性接收的是直接执行的JavaScript代码片段，不是函数定义或函数引用。你写的箭头函数只是定义了函数但未调用，所以不会执行；直接写函数名也只是引用函数，不会触发执行。

要访问config-request事件的对象，直接在代码片段里用event变量即可——htmx会自动把事件对象注入到这个变量中。

正确写法示例 #

<button hx-get="/api/things"
        hx-on:config-request="console.log('🙌 ', event)"
        hx-target="#target">
Click Me!
</button>
<p id="target">...</p>

关键说明 #

• 不需要用箭头函数包裹，直接写执行语句即可，event变量可直接使用
• 如果要调用自定义函数，直接在代码片段里调用并传入event：

  hx-on:config-request="handleConfigRequest(event)"
  

  对应的JS：

  function handleConfigRequest(event) {
    console.log('配置请求事件:', event);
    // 可通过event.detail.requestConfig修改请求配置
    event.detail.requestConfig.headers['X-Custom-Header'] = 'foo';
  }
  

• 直接写console.log不会执行，因为这只是函数引用，必须写成console.log(...)才会触发函数调用

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