javascript - 事件目标在我的 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