Blazor框架下<li>元素绑定的click点击事件未触发问题求助

可能的问题及排查顺序： #

• CSS导致点击事件被屏蔽
  这是最容易踩的坑，先检查两点：

  1. 你的.label-3类或者子项li有没有设置pointer-events: none，这个属性会直接让元素不响应任何鼠标事件
  2. 有没有其他层级更高的透明元素（比如遮罩层、伪元素）覆盖了li区域，导致点击实际上落到了上层元素上
     可以临时给li加个内联样式测试：<li style="pointer-events: auto !important; z-index: 9999;" ...>，看能不能触发事件。

• Code Behind类定义不匹配
  独立CS文件作为组件的代码后置，必须满足两个要求：

  1. 类必须和razor组件是同名的partial类
  2. 类必须继承自ComponentBase
     比如你的组件叫SearchFilter.razor，那CS文件的类定义应该是：

  public partial class SearchFilter : ComponentBase
  {
      // 你的业务代码
  }
  

  如果不是partial类、类名不匹配或者没有正确继承父类，都会导致Razor模板找不到绑定的方法，事件无法触发。

• 低版本.NET的循环闭包问题
  如果你用的是.NET Core 3.1或更早的版本，Razor里foreach的循环变量会被lambda统一捕获，虽然一般是传参错误，但极端情况也可能导致事件绑定失效，改成循环内声明临时变量即可：

  <ul class="label-3" role="listbox">
      @foreach (var searchoption in SearchBy.SearchValues)
      {
          var tempOption = searchoption;
          <li value="@tempOption.SearchById" @onclick="@(() => LstItemClick(tempOption))">@tempOption.Value</li>
      }
  </ul>
  

  .NET 5及以上版本已经修复了这个问题，不用额外处理。

• 第三方JS拦截了点击事件
  如果你引入了第三方UI库或者自定义JS，检查有没有对ul[role=listbox]或者子li元素绑定了click事件，并且做了stopPropagation或者preventDefault处理，会阻止Blazor的托管事件接收到触发通知。可以打开浏览器开发者工具的元素面板，选中li元素查看绑定的事件监听器排查。

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