Question 198529 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Double-clicking twice in a row not registering on react component?

I have some very simple code in a functional react component:

const example = () => (
    <div onDoubleClick={() => { console.log('fired'); }}>
      test element
    </div>
);

Double-clicking once logs 'fired' as expected, but double-clicking twice in a row without delay does not log it twice. I have to wait a fraction of a second before double-clicking again if I want it to fire a second time. Is there some sort of built-in rate limiting happening here?

I will note that the same thing happens on the interactive example in the MDN docs for the dblclick event – if you double click while the example is transitioning, it doesn’t recognize the input and ignores it. Is this happening at the browser level? Is this documented anywhere?

Tags:

2

Answers


  1. 0

    well, this has nothing to do with React as well as the browser. but this behavior is related to how JavaScript Mouse Events works .

    click event on an element :

    1 – The mousedown when you depress the mouse button on the element

    2 – The mouseup hen you release the mouse button on that element

    3- When these combination are detected you fire The click event

    however double click event, It takes two click events to cause it :

    1- mousedown

    2- mouseup

    3- click

    4- mousedown

    5- mouseup

    6- click

    7 – dblclick

    the problem you faced when you double-clicked twice in a row without delay. javascript runs the first demonstration (clicks) four times rather than two dbclick

    Login or Signup to reply.
  2. 0

    you can use the onClick method instead:

    const example = () => (
   <div onClick={(e) => {
        !(e.detail % 2) && console.log("fired");
      }}
    >
      test element
    </div>
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search