русский
Germany.ruForen → Архив Досок→ Programmierung

Используете уникальные идентификаторы для объектов?

04.11.24 22:57
Re: Используете уникальные идентификаторы для объектов?
 
AlexNek патриот
AlexNek
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`.
 

Sprung zu