Цель мероприятия не работает в моем блазорном проекте

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

Вы можете передать elementRef методу javascript, используя @ref:

@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