How to prevent single click when double click on react

Question

How to prevent single click when double click on react

68 Views Asked by Abhinand Tk At 16 March 2024 at 07:26

I want to call a function on single click and double click on an video element in react.But when i double click the element it also calling the single click function

I want the solution of the problem

Here is the video element

<video
                      id={`post${index}`}
                      width="640"
                      height="360"
                      // controls
                      // onDoubleClick={() =>
                      //   setdoublefunction(item.post_id, index)
                      // }
                      onDoubleClick={(event)=>{
                        handleDoubleClick (event,index)
                      }}
                      className="post__media_video"
                      alt="Post Content"
                      style={{
                        objectFit: "contain",
                        background: "black",
                      }}
                      onClick={(event) => {
                          videoFunction(event,index)
                     
                      }}
                    >
                      <source src={item.image} type="video/mp4" />
                      <source src={item.image} type="video/webm" />
                      Your browser does not support the video tag.
                    </video>

Original Q&A

There are 2 best solutions below

**jifakir** · Answer 1 · 2024-03-16T07:42:29.447000

const [clickCount, setClickCount] = useState(0);

  const handleClick = () => {
    setClickCount(prevCount => prevCount + 1);
    setTimeout(() => {
      if (clickCount === 1) {
        // Single click action
        console.log('Single click action');
      }
      setClickCount(0);
    }, 250); // Change the delay as needed for distinguishing between single and double clicks
  };

You can add this mechanism to your code to handle a single click. There is no default handler to prevent a single click in this scenario, according to my knowledge.

**Ahmet Emrebas** · Answer 2 · 2024-03-16T08:27:40.037000

We have a term in reactive programming, called debouncing. Debouncing limits the occurrence of an event to a defined interval.

For example, a click event can happen once (only) in 2 seconds. In other words, the user cannot run the click event more than 1 time in 2 seconds. In other words, the user cannot send repetitive click events. In other words, the user should wait at least 2 seconds to execute a click event again. In other words, debouncing bounces events.

I just provided a solution with setTimeOut function, but I highly recommend you look at the RxJS library.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>Click</button>
  </body>

  <script>
    const buttonElement = document.querySelector('button');

    let debounceTimer = 0;
    let resetTimer = 0;
    let debounceCounter = 0;

    function debounce(func) {
      debounceCounter++;
      clearTimeout(debounceTimer);
      clearTimeout(resetTimer);
      debounceTimer = setTimeout(() => {
        if (debounceCounter == 1) {
          func();
        }
        resetTimer = setTimeout(() => {
          debounceCounter = 0;
        }, 400);
      }, 400);
    }

    buttonElement.addEventListener('click', () => {
      debounce(() => console.log('Click'));
    });

    buttonElement.addEventListener('dblclick', (e) => {
      console.log('Dubble Click');
    });
  </script>
</html>

How to prevent single click when double click on react

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in NEXT.JS

Related Questions in ONCLICK

Trending Questions

Popular # Hahtags

Popular Questions