西装外套。如何在onmousemove事件中捕获鼠标？

由 发布于 capturemouseeventdom-eventsblazor
 收藏

How to capture mouse in onmousemove event in Blazor like UIElement.CaptureMouse() in WPF?

评论
切克闹
切克闹

这是一个小示例，展示了如何在显示ClientX值的同时将鼠标移至div上：

 <div style="background-color:aliceblue" @onmousemove="@((args) => 
  mousemove=args.ClientX.ToString())"> Move the mouse over the div 
  element</div>
 <p>ClientX: @mousemove</p>

 @code{
    private string mousemove;

 }

注意：@onmousemove指令的值是具有单个参数MouseEventArgs的lambda表达式。当鼠标移到div的表面上时，会不断触发mousemove事件，并且 将类型为MouseEventArgs的args参数传递给我们的方法，在将其转换为字符串值之后，将其分配给该方法，并将其分配给显示其值的变量...

希望这可以帮助！

点赞
评论
verror
verror
...在Blazor中就像UIElement.CaptureMouse（）

The closest match would be Element.setPointerCapture()

In order to use it you will need to get an ElementReference in Blazor with @ref and a JS method to invoke setPointerCapture on it. You need to pass a pointerId that you get from PointerEventArgs.

不要使用与Mouse *相关的​​事件/方法，它们在JS中或多或少不推荐使用。

因此，您可以从以下内容开始：

 <div @ref="myTarget" @onpointerdown="StartCapture">  ... </div>

@code{    
    ElementReference myTarget;

    async Task StartCapture(PointerEventArgs args)
    {
        await JSRuntime.InvokeVoidAsync("myJsFunctions.capturePointer",
                 myTarget, args.PointerId);
    }    
}
点赞
评论