withModifiers() 包装事件修饰符

最后更新：2026-10-22

withModifiers() 在渲染函数里为事件处理函数加上修饰符行为（stop、prevent、once 等）。

📝 语法

h("button", { onClick: withModifiers(fn, ["prevent", "stop"]) }, "提交")

handler, modifiers	事件处理函数 + 修饰符名数组

返回值：包装后的事件处理函数

修改下面的代码，在预览区实时查看效果：

输出：

点内层只显示「内层触发」；点外层显示「外层触发」。

ℹ️ 说明 模板里的 .stop/.prevent 编译后就是调用它，行为完全一致。

💡 提示 手写渲染函数或高阶组件里需要修饰符时用它。

⚠️ 注意 修饰符名用短名：'stop'、'prevent'、'self'、'once'；键修饰符写作 'enter' 等。

更多案例即将上线。

Q 模板里也要用吗？

A 不需要，模板有 @click.stop 这类语法糖。

Q 能叠加多个吗？

A 能：['prevent', 'stop']，按序生效。

Q 和手动写 e.stopPropagation() 的区别？

A 效果相同，withModifiers 更简短且与模板行为统一。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。