Blazor @onclick 事件处理教程

来源:这里教程网 时间:2026-02-21 17:34:07 作者:

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

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

只要方法不带参数,直接把方法名写在

@onclick
后面就行:

<button>点我</button>

@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")

例如:

<button> UpdateStatus("saved"))">保存</button>

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

阻止默认行为:@onclick:preventDefault

有些元素点击后有默认动作(比如表单提交、链接跳转),可以用

@onclick:preventDefault
阻止:

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

示例(阻止链接跳转):

<a href="https://example.com">不会跳转的链接</a>

或者动态控制:

<input>

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

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

相关推荐