Blazor OnClick 在带有 JS 事件处理程序的元素内部不起作用

Question

尝试使用鼠标选择特定 HTML 元素内的多个元素，类似于用户在 Windows 资源管理器中选择多个文件和文件夹的方式。 Testedseverallibraries。一般来说，它们可以工作，但棘手的部分是每个可选元素内部都有一个复选框。

<div class="container">
  <div class="selectable"><input type="checkbox" /></div>
  <div class="selectable"><input type="checkbox" /></div>
  <div class="selectable"><input type="checkbox" /></div>
</div>

要使用鼠标选择元素，每个库都会在container 中添加mousedown、mousemove、mouseup 事件处理程序，它仍然可以正常工作，如下面的代码笔中所示，mousedown 在container 上正常运行与复选框上的click 共存。

https://codepen.io/artemiusgreat/pen/eYWzrQb

显然，Blazor 不是这种情况，因为我在上面的 codepen 中具有相同的标记，相同的事件，但是一旦我使用 JS 互操作将mousedown 事件添加到container，@987654335 中的所有复选框@ 停止工作。无论有没有onclick，复选框都会显示为无效且不可点击。

<!-- Checkbox outside of container works fine -->
<input type="checkbox" @onclick=@(e => SelectCollection(e)) />

<div class="container"> <!-- Inner checkboxes work only if container doesn't have "mousedown" handler -->

  <!-- Checkbox inside of container with Blazor "onclick" does NOT work -->
  <input type="checkbox" @onclick=@(e => SelectCollection(e)) />

  <!-- Checkbox inside of container does NOT work even if it doesn't have any handlers -->
  <input type="checkbox" />
  
</div>

为什么？？？

Answer 1

这是您的代码工作...我猜它对您不起作用的主要原因是您使用了click 事件，但您应该使用change 事件。

@page "/"


<!-- Checkbox outside of container works fine -->
<input type="checkbox"  @onchange="@((args) => SelectCollection(args))" />

<div class="container" @onmousedown="@(() => message2 = "Down with the mouse: " + count++.ToString())"> <!-- Inner checkboxes work only if container doesn't have "mousedown" handler -->

  <!-- Checkbox inside of container with Blazor "onclick" does NOT work -->
  <input type="checkbox" @onchange="@((args) => SelectCollection(args))" />

  <!-- Checkbox inside of container does NOT work even if it doesn't have any handlers -->
  <input type="checkbox" />
  
</div>


<p>@message</p>
<p>@message2</p>
@code
{
    private string message;
    private string message2;
    private int count;

    protected async Task SelectCollection(ChangeEventArgs args)
    {
        message = args.Value.ToString();
        await Task.Yield();
    }
}

Answer 2

Enet 的答案是正确的，但我将添加一个单独的答案来描述根本原因。

正如我在评论中提到的，每个鼠标选择脚本都必须创建一个显示所选区域的动态 DIV。由于某种原因，当我从放置复选框的位置开始选择时，会在复选框检测到单击事件之前创建蓝色区域。因此，此动态 DIV 会在所有鼠标事件到达复选框之前拦截它们。

为了解决此问题，当我为选定区域创建 DIV 时，我将 DIV 的起始位置增加了 10 个像素，因此如果鼠标单击坐标为{ x: 5, y: 20 } 的复选框顶部，则DIV 应转移到{ x: 15, y: 30 }。在这种情况下，屏幕截图上的蓝色区域不会拦截鼠标事件，并且复选框按预期工作。