Disable click event when dragging embla carousel

it’s ok no problems i found solution by using pointerDown pointerUp

embla.on('pointerDown', (eventName) => { console.log('function happen'); });

embla.on('pointerDown', (eventName) => { console.log('function happen'); });

here is code for all who search for it too.

import { setupPrevNextBtns, disablePrevNextBtns } from "./prevAndNextButtons";
import { setupDotBtns, generateDotBtns, selectDotBtn } from "./dotButtons";

let time = 200;

let t = setTimeout(test, time);

function test() {
  console.log('embla timeout started');
}

function disablePointerEvents() {
  let elemArr = document.querySelectorAll('.drop-link');
    for(let i = 0; i < elemArr.length; i++) {
      elemArr[i].classList.add('disabled');
    }
}
function enablePointerEvents() {
  let elemArr = document.querySelectorAll('.drop-link');
    for(let i = 0; i < elemArr.length; i++) {
      elemArr[i].classList.remove('disabled');
    }
}

const setupEmblaCarousel = (emblaNode, options) => {
  const viewPort = emblaNode.querySelector(".embla__viewport");
  const prevBtn = emblaNode.querySelector(".embla__button--prev");
  const nextBtn = emblaNode.querySelector(".embla__button--next");
  const dots = emblaNode.querySelector(".embla__dots");
  const embla = EmblaCarousel(viewPort, options);
  const dotsArray = generateDotBtns(dots, embla);
  const setSelectedDotBtn = selectDotBtn(dotsArray, embla);
  const disablePrevAndNextBtns = disablePrevNextBtns(prevBtn, nextBtn, embla);

  setupPrevNextBtns(prevBtn, nextBtn, embla);
  setupDotBtns(dotsArray, embla);

  embla.on("select", setSelectedDotBtn);
  embla.on("select", disablePrevAndNextBtns);
  embla.on("init", setSelectedDotBtn);
  embla.on("init", disablePrevAndNextBtns);

  embla.on('pointerDown', (eventName) => {
    
    clearTimeout(t);
    t = setTimeout(disablePointerEvents, time);
    

  });

  embla.on('pointerUp', (eventName) => {

    clearTimeout(t);
    t = setTimeout(enablePointerEvents, time);

  });

};

const options = { loop: false };
const emblaNodes = [].slice.call(document.querySelectorAll(".embla"));
const emblaCarousels = emblaNodes.map(emblaNode =>
  setupEmblaCarousel(emblaNode, options)
);

sorry about that! if you know better way to do it please tell me! best reggards from Vlad!

[davidjerleke]

Hi @vladtabachuk,

embla.clickAllowed() has been stable for a long time now. Please create a CodeSandbox with your setup that demonstrates the issue. It’s hard for me to guess what could be wrong when I don’t have the whole picture. That will enable me to debug your code instead of guessing what could be wrong 🙂.

Kindly David

[davidjerleke]

If you’re using a script tag, try including this, it should give you the latest version:

<script src="https://unpkg.com/embla-carousel@latest/embla-carousel.umd.js"></script>

If you’re using a module bundler install the latest version like so:

npm install embla-carousel@latest --save