How can I create a Double Click Link in react?

Question

I have a Draggable image link that opens the link in a new tab. The problem is that when the image is dragged it of course ends up clicking the link, when I don't want it to. So how can I make it so that the link only activates on a double click?

<Draggable>
    <div className="m-2">
      <a
        href={destination}
        rel="noreferrer"
        target="_blank"
        className="relative cursor-zoom-in w-auto hover:shadow-lg rounded-lg overflow-hidden transition-all duration-500 ease-in-out"
      >
        <img
          className="rounded-lg w-full"
          alt="user-post"
          src={urlFor(image).width(1000).url()}
        />
      </a>
    </div>
    </Draggable>

Ignore the tailwind.css sorry about that. – Umbra Aevaz May 31 '22 at 11:27 — Umbra Aevaz, May 31 '22 at 11:27

Marcus · Answer 1 · 2022-05-31T11:34:06.807

due to the limitations of DOM's Click and double click events, it cannot detect the difference between a click and a double click.

You can still do this though by using a "Delay".

  let timer = 0;
  let delay = 200;
  let prevent = false;

  doClickAction() {
    console.log(' click');
  }
  doDoubleClickAction() {
    console.log('Double Click')
  }
  handleClick() {
    let me = this;
    timer = setTimeout(function() {
      if (!prevent) {
        me.doClickAction();
      }
      prevent = false;
    }, delay);
  }
  handleDoubleClick(){
    clearTimeout(timer);
    prevent = true;
    this.doDoubleClickAction();
  }
 <button onClick={this.handleClick.bind(this)} 
    onDoubleClick = {this.handleDoubleClick.bind(this)} > click me </button>

And how would I get the {destination} inside of the doDoubleClickAction instead of console.log? — Umbra Aevaz, May 31 '22 at 11:48

score 0 · Answer 2 · answered May 31 '22 at 11:30

const navigate = useNavigate()
    
return (
        <Draggable>
            <div className="m-2">
              <button
                onDoubleClick={() => navigate('/link')}
                className="relative cursor-zoom-in w-auto hover:shadow-lg rounded-lg overflow-hidden transition-all duration-500 ease-in-out"
              >
                <img
                  className="rounded-lg w-full"
                  alt="user-post"
                  src={urlFor(image).width(1000).url()}
                />
              </button>
            </div>
            </Draggable>
    )

However I'd like to open the link within a new tab outside of the application. — Umbra Aevaz, May 31 '22 at 11:46

score 0 · Answer 3 · answered May 31 '22 at 21:54

0

I switched to a button with a onDoubleClick function:

function here () {
       window.open(destination, '_blank');
     }

answered May 31 '22 at 21:54

Umbra Aevaz

1

How can I create a Double Click Link in react?

3 Answers3