Блог

Я использую embla-carousel плагин для создания карусели и хочу игнорировать событие onClick, которое ссылается на другую страницу, когда я прокручиваю горизонтально.

Возможно, вы ищете метод регистрации с именем Embla embla.clickAllowed() . Я не знаю, используете ли вы версию Embla VanillaJS или ReactJS. Во всяком случае, пример использования выглядит примерно так:

 const onSlideClick = useCallback((index) => {
  if (!embla || !embla.clickAllowed()) return

  // Embla says the pointer interaction was a static click, and not a drag move.
  // Do your magic here...
}, [embla])
 

 <div className="embla__container">
  {slides.map((slide, index) => {
    <div className="embla__slide" onClick={() => onSlideClick(index)}>
      ...
    </div>
  })}
</div>
 

Как это работает под капотом

Если указатель сенсорный, Эмблема будет:

• Предотвратите щелчок, когда жест является перемещением перетаскивания.
• Предотвращайте щелчки при нажатии на карусель во время прокрутки.

Если указатель мыши, Embla будет:

• Предотвратите щелчок, когда жест является перемещением перетаскивания.
• Не предотвращайте щелчки при нажатии на карусель во время прокрутки.

Причина такого выбора дизайна заключается в том, что указатели касания прокручивают документ. И когда документ изначально прокручивается на сенсорных устройствах, он предотвращает щелчки до тех пор, пока пользователь не остановит прокрутку и не нажмет снова, когда он будет установлен.

Но указатели мыши не используются для прокрутки документа, если только вы не перетаскиваете полосу прокрутки. И если вы перетаскиваете полосу прокрутки, это в любом случае предотвратит случайное нажатие на что-либо на веб-странице, потому что указатель находится в области полосы прокрутки. Таким образом, здесь предполагается, что мы можем быть более уверены в том, что щелчок указателем мыши является преднамеренным.

Ссылки

• Ссылка на API embla.clickAllowed() здесь.
• Руководство о том, как реализовать события щелчка с помощью Embla, находится на веб-сайте документации здесь.