Blazor @onclick 事件处理教程

@onclick支持四种事件绑定方式：无参数直接调用、接收MouseEventArgs获取鼠标信息、用Lambda传自定义值、加:preventDefault阻止默认行为。

Blazor 的 @onclick 是最常用、最直观的事件绑定方式，它让你用 C# 直接响应用户点击，无需写一行 JavaScript。

基础写法：无参数直接调用

只要方法不带参数，直接把方法名写在 @onclick 后面就行：

点我

@code {
  private void HandleClick()
  {
    Console.WriteLine("按钮被点了");
  }
}

Blazor 运行时会自动识别这个方法，并在点击时执行。不需要手动传参，也不需要加括号。

获取鼠标信息：使用 MouseEventArgs

如果想拿到点击位置、按键状态（比如是否按了 Ctrl / Shift / 右键），就给方法加一个 MouseEventArgs 参数：

• Blazor 会自动注入这个参数，你不用在 HTML 里写任何东西
• 常见属性有：ScreenX/ScreenY（屏幕坐标）、ClientX/ClientY（视口坐标）、Button（0=左键，2=右键）、CtrlKey、ShiftKey 等

示例：

@code {
  private void HandleClick(MouseEventArgs e)
  {
    if (e.CtrlKey)
      Console.WriteLine($"Ctrl+点击，位置：{e.ClientX},{e.ClientY}");
  }
}

传自定义值：用 Lambda 表达式

当你要传入固定字符串、数字或组件状态变量时，就得用 @onclick="@(e => Method(param))" 写法：

• 注意括号和 @ 符号不能少，否则编译报错
• 即使你不使用 e，也要保留参数占位（如 e => DoSomething("hello")）

例如：

UpdateStatus("saved"))">保存

@code {
  private void UpdateStatus(string state)
  {
    Console.WriteLine($"状态已设为：{state}");
  }
}

阻止默认行为：@onclick:preventDefault

有些元素点击后有默认动作（比如表单提交、链接跳转），可以用 @onclick:preventDefault 阻止：

• 写法是紧挨着事件指令，加冒号和 preventDefault，后面不加等号就是“始终阻止”
• 也可以绑定布尔变量或表达式，实现条件阻止

示例（阻止链接跳转）：

不会跳转的链接

或者动态控制：

@code {
  private void OnKey(KeyboardEventArgs e)
  {
    // 只有 Enter 被拦截，其他键照常触发
  }
}

基本上就这些。掌握这四种模式，就能覆盖绝大多数 @onclick 使用场景。