How not to handle a click on an element while dragging it?

Question

Slider

I'm using React Responsive Carousel and I need my slides (links) to not fire when dragging, but only fire when clicked
Example:

import React from "react";
import { Carousel } from "react-responsive-carousel";

export default () => {
  return (
    <Carousel useKeyboardArrows={true}
    showStatus={false}
    showThumbs={false}
    emulateTouch={true}>
      <div>
        <a href="http://www.github.com" target="_blank">
          <div>
            <img src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg" />
          </div>
        </a>
        <p className="legend">Legend 1</p>
      </div>
      <div>
        <a href="http://www.github.com" target="_blank">
          <div>
            <img src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg" />
          </div>
        </a>
        <p className="legend">Legend 1</p>
      </div>
    </Carousel>
  );
};

Answer 1

Try using a div instead of a link and hang onClick on it in which you will call the function and already in the function translate the link. If it doesn’t help, then create a separate button explicitly indicating that the link is followed on it and leave everything else as a div