事件目标在我的 Blazor 项目中不起作用

Question

我正在尝试单击一个元素并获取 offsetTop 位置。我正在尝试使用此 javascript 代码来执行此操作：

window.ShowAlert = function myFunction(event) {   
    console.log("Hello World.");
    alert(event.target.offsetTop);
}

此代码位于我的 wwwroot 和 Index.razor 中的一个文件夹中，我有此代码：

@inject IJSRuntime jsRuntime

<div>
    <Member OnClick="MemberFunction" />
</div>

@code {
    void MemberFunction()
    {
        jsRuntime.InvokeAsync<object>("ShowAlert");
    }
}

当我运行控制台日志按预期出现但警报没有出现时，我尝试将警报更改为出现 "Hello World" 并且工作正常，问题是 event.target。为什么带有 offsetTop 位置的警报不起作用？

感谢您的关注。

Answer 1

您可以使用@ref 将 elementRef 传递给 javascript 方法：

@inject IJSRuntime jsRuntime

<div>
    <Member @onclick="MemberFunction" @ref="memberRef"/>
</div>

@code {

    private ElementReference memberRef;
    void MemberFunction()
    {
        jsRuntime.InvokeAsync<object>("ShowAlert", memberRef);
    }
}

编辑

您需要修改 javascript:

window.ShowAlert = function myFunction(element) {   
    console.log("Hello World.");
    alert(element.offsetTop);
}

注意

我将 OnClick 更改为 @onclick。

您可以在 BlazorFiddle 上看到一个演示 -> https://blazorfiddle.com/s/61o1g7ef

事件目标在我的 Blazor 项目中不起作用

Event target not working in my blazor project

javascript

blazor