Login
Используете уникальные идентификаторы для объектов?
1559 просмотров
Перейти к просмотру всей ветки
in Antwort alex445 04.11.24 20:08, Zuletzt geändert 05.11.24 17:17 (AlexNek)
Кроме как по времени никак не разделить
Вот что предлагает (не будем показывать пальцем кто). В .md формате
To handle a double-click event separately from a single-click event in Blazor, you can use JavaScript interop to control the timing and differentiate between single and double-clicks. Here's a clean approach using JavaScript to delay the single-click action slightly. If a double-click is detected within a short time, the single-click action will be ignored. 1. **JavaScript Helper**: Add a JavaScript function to detect single vs. double clicks. This function uses `setTimeout` to delay the single-click action, which is canceled if a double-click occurs within the delay period. ```html <script> window.clickHandler = { singleClickTimeout: null, handleClick: function(elementId, singleClickCallback, doubleClickCallback) { clearTimeout(this.singleClickTimeout); // Set up a timeout for single-click this.singleClickTimeout = setTimeout(() => { singleClickCallback(); }, 250); // Delay to allow for double-click detection // Detect double-click document.getElementById(elementId).ondblclick = () => { clearTimeout(this.singleClickTimeout); doubleClickCallback(); }; } }; </script> ``` 2. **Blazor Component**: Set up your component with `@ref` to access the element ID in JavaScript and call the JavaScript function to handle clicks. ```razor @page "/click-sample" <button @ref="clickButton" @onclick="HandleSingleClick">Click me</button> @code { private ElementReference clickButton; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JS.InvokeVoidAsync("clickHandler.handleClick", clickButton.Id, DotNetObjectReference.Create(this), nameof(SingleClickAction), nameof(DoubleClickAction) ); } } [JSInvokable] public void SingleClickAction() { // Logic for single-click action } [JSInvokable] public void DoubleClickAction() { // Logic for double-click action } private async Task HandleSingleClick(MouseEventArgs e) { // Prevent Blazor's default click behavior, handling it in JavaScript instead } } ``` 3. **Explanation**: - `clickHandler.handleClick` is a JavaScript function that handles click events for the button. - `SingleClickAction` and `DoubleClickAction` are Blazor methods decorated with `[JSInvokable]`, making them callable from JavaScript. - `HandleSingleClick` is the Blazor click handler, but it's empty here because JavaScript fully handles click detection. This approach will prevent the single-click handler from triggering when a double-click is detected, keeping the two actions distinct. You can adjust the delay for detecting double-clicks by modifying the timeout value in `setTimeout`.