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

Javascript – How to prevent single click when double click on react

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>
Tags:

2

Answers


  1. 0 
    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search