so the thing is that I have slider in which each card has link over it and when I try to do mousedown event on the whole element if that mouse is on the card it is perceived as click.

<div class="offers-slider">
 <div class="slider-inner">
  <div class="offer">
    <a href="#">
      <div class="image-container">
        <img src="./assets/offer-slider1.jpg">
      </div> 
      <div class="offer-content">
        <p>dfsd</p>
        <h3>sdfasf</h3>
      </div>
    </a>      
      
  </div>

  <div class="offer"></div>

  <div class="offer">
</div>

  <div class="offer"></div>

  <div class="offer"></div>

  <div class="offer"></div>
</div>
</div>

so this is the element and I just want it to become draggable

let isPressed = false;
  let cursorXSpace;
  let scrollLeft;

  slider.addEventListener("mousedown", (e) => {
    isPressed = true;
    cursorXSpace = e.clientX - sliderInner.getBoundingClientRect().left;
    scrollLeft = sliderInner.scrollLeft;
    slider.style.cursor = "grabbing"; // Change cursor to grabbing when dragging
  });

  window.addEventListener("mouseup", () => {
    isPressed = false;
    slider.style.cursor = "grab"; // Change cursor back to grab when not dragging
  });

  slider.addEventListener("mousemove", (e) => {
    if (!isPressed) return;
    e.preventDefault();
    const x = e.clientX;
    const move = (x - cursorXSpace);
    sliderInner.scrollLeft = scrollLeft - move;
    boundCards();
  });

  function boundCards() {
    const slider_rect = slider.getBoundingClientRect();
    const sliderInner_rect = sliderInner.getBoundingClientRect();

    if (sliderInner.scrollLeft < 0) {
      sliderInner.scrollLeft = 0;
    } else if (sliderInner.scrollLeft + sliderInner.clientWidth > sliderInner.scrollWidth) {
      sliderInner.scrollLeft = sliderInner.scrollWidth - sliderInner.clientWidth;
    }
  }

I tried this