Мышка срабатывает со второго раза?

Рейтинг: 0Ответов: 1Опубликовано: 24.05.2023

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

const slider = document.querySelector('.scroll');
let isDown = false;
let isMove = false; // Переменная, отвечающаяя за состояние свайпа
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});

slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});

slider.addEventListener('mouseup', () => {
  isDown = false;

  /*
    Если отжали ЛКМ, то свайп закончен.
    Но не сразу, чтобы не стриггерить клик в момент, когда переменная станет false
  */
  setTimeout(() => {
    isMove = false;
  }, 50);
  slider.classList.remove('active');

});
slider.addEventListener('mousemove', (e) => {
  if (!isDown) return;
  isMove = true; // Меняем переменную
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 1; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
  // console.log(walk);
});

/*
  Блокируем все ссылки, если свайпаем
*/
const links = document.querySelectorAll('.slider a');
links.forEach(el => {
  el.addEventListener('click', (e) => {
    if (isMove) e.preventDefault();
  });
});
.scroll {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  user-select: none;
  cursor: pointer;
  height: 300px;
  visibility: hidden;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.scroll:hover {
  visibility: visible;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.scroll.active {
  background: rgba(255, 255, 255, 0.3);
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.scroll::-webkit-scrollbar {
  width: 10px;
}

.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #18aaaa;
}

.scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: black;
  -o-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

.slider {
  visibility: visible;
  position: absolute;
  display: flex;
  left: 5px;
}

.filmhit {
  width: 180px;
  height: 250px;
  overflow: hidden;
  border-radius: 25px;
  display: inline-flex;
  position: relative;
  text-align: center;
  border: 2px solid black;
}

.filmhit a span {
  position: absolute;
  z-index: 2;
  top: 206px;
  height: 40px;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filmhit img {
  width: 100%;
  height: 100%;
  position: absolute;
}

.filmshadow {
  opacity: 0;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  display: block;
  overflow: hidden;
  position: absolute;
  background: rgba(0, 0, 0, 0.53) url(../images/style/slider1_play.png) no-repeat center;
  z-index: 2;
  line-height: 200px;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.filmhit:hover .filmshadow {
  opacity: 1;
}

.filmhit a::before {
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  height: 120px;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 100%);
}
<div class="scroll">

  <div class="slider">
    <div class="filmhit">


      <a href="https://sefil.ru/films/483-forsazh-the-fast-and-the-furious-2001.html" title="Форсаж / The Fast and the Furious (2001)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Форсаж / The Fast and the Furious (2001) (The Fast and the Furious)  трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Форсаж / The Fast and the Furious (2001)"
        />
        <span>Форсаж / The Fast and the Furious (2001)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/33-posledniy-bogatyr-koren-zla-2020.html" title="Последний богатырь: Корень зла (2020)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Русский Фильм Последний богатырь: Корень зла (2020)   трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Последний богатырь: Корень зла (2020)"
        />
        <span>Последний богатырь: Корень зла (2020)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/12-mulan-mulan-2020.html" title="Мулан / Mulan (2020)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Мулан / Mulan (2020) (Mulan)  трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Мулан / Mulan (2020)" />
        <span>Мулан / Mulan (2020)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/34-posledniy-bogatyr-2017.html" title="Последний богатырь (2017)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Русский Фильм Последний богатырь (2017)   трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Последний богатырь (2017)" />
        <span>Последний богатырь (2017)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/19-prostaya-prosba-a-simple-favor-2018.html" title="Простая просьба (2018)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Простая просьба (2018) (A Simple Favor)  трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Простая просьба (2018)" />
        <span>Простая просьба (2018)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/18-most-v-terabitiyu-bridge-to-terabithia-2006.html" title="Мост в Терабитию (2006)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Мост в Терабитию (2006) (Bridge to Terabithia)  трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Мост в Терабитию (2006)" />
        <span>Мост в Терабитию (2006)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/17-misterium-ohotniki-na-fazanov-fasandraeberne-2014.html" title="Мистериум: Охотники на фазанов (2014)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Мистериум: Охотники на фазанов (2014) (Fasandræberne) смотреть онлайн, а также трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Мистериум: Охотники на фазанов (2014)"
        />
        <span>Мистериум: Охотники на фазанов (2014)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/16-pipec-kick-ass-2010.html" title="Пипец (2010)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Пипец (2010) (Kick-Ass) смотреть онлайн, а также трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Пипец (2010)" />
        <span>Пипец (2010)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/15-pulya-bullet-2013.html" title="Пуля (2013)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Пуля (2013) (Bullet) смотреть онлайн, а также трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Пуля (2013)" />
        <span>Пуля (2013)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/13-11-intouchables-2011.html" title="1+1 (2011)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм 1+1 (2011) (Intouchables)  трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="1+1 (2011)" />
        <span>1+1 (2011)</span>
      </a>
    </div>

  </div>
</div>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0

теперь по ссылке переходит только после второго нажатия, в чем может быть ошибка

В твоем алгоритме.

В твоем обработке клика первый раз делается отмена действия по умолчанию. Это вывод "Отмена 2" (см.консоль)...

const slider = document.querySelector('.scroll');
let isDown = false;
let isMove = false; // Переменная, отвечающаяя за состояние свайпа
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});

slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});

slider.addEventListener('mouseup', () => {
  isDown = false;

  /*
    Если отжали ЛКМ, то свайп закончен.
    Но не сразу, чтобы не стриггерить клик в момент, когда переменная станет false
  */
  setTimeout(() => {
    isMove = false;
  }, 50);
  slider.classList.remove('active');

});
slider.addEventListener('mousemove', (e) => {
  if (!isDown) return;
  isMove = true; // Меняем переменную
  console.log('Отмена 1')
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 1; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
  // console.log(walk);
});

/*
  Блокируем все ссылки, если свайпаем
*/
const links = document.querySelectorAll('.slider a');
links.forEach(el => {
  el.addEventListener('click', (e) => {
    console.log('Клик')
    if (isMove) {
      console.log('Отмена 2')
      e.preventDefault();
    }
  });
});
.scroll {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  user-select: none;
  cursor: pointer;
  height: 300px;
  visibility: hidden;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.scroll:hover {
  visibility: visible;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.scroll.active {
  background: rgba(255, 255, 255, 0.3);
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.scroll::-webkit-scrollbar {
  width: 10px;
}

.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #18aaaa;
}

.scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: black;
  -o-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

.slider {
  visibility: visible;
  position: absolute;
  display: flex;
  left: 5px;
}

.filmhit {
  width: 180px;
  height: 250px;
  overflow: hidden;
  border-radius: 25px;
  display: inline-flex;
  position: relative;
  text-align: center;
  border: 2px solid black;
}

.filmhit a span {
  position: absolute;
  z-index: 2;
  top: 206px;
  height: 40px;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filmhit img {
  width: 100%;
  height: 100%;
  position: absolute;
}

.filmshadow {
  opacity: 0;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  display: block;
  overflow: hidden;
  position: absolute;
  background: rgba(0, 0, 0, 0.53) url(../images/style/slider1_play.png) no-repeat center;
  z-index: 2;
  line-height: 200px;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.filmhit:hover .filmshadow {
  opacity: 1;
}

.filmhit a::before {
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  height: 120px;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.95) 100%);
}
<div class="scroll">

  <div class="slider">
    <div class="filmhit">


      <a href="https://sefil.ru/films/483-forsazh-the-fast-and-the-furious-2001.html" title="Форсаж / The Fast and the Furious (2001)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Форсаж / The Fast and the Furious (2001) (The Fast and the Furious)  трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Форсаж / The Fast and the Furious (2001)"
        />
        <span>Форсаж / The Fast and the Furious (2001)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/33-posledniy-bogatyr-koren-zla-2020.html" title="Последний богатырь: Корень зла (2020)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Русский Фильм Последний богатырь: Корень зла (2020)   трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Последний богатырь: Корень зла (2020)"
        />
        <span>Последний богатырь: Корень зла (2020)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/12-mulan-mulan-2020.html" title="Мулан / Mulan (2020)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Мулан / Mulan (2020) (Mulan)  трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Мулан / Mulan (2020)" />
        <span>Мулан / Mulan (2020)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/34-posledniy-bogatyr-2017.html" title="Последний богатырь (2017)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Русский Фильм Последний богатырь (2017)   трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Последний богатырь (2017)" />
        <span>Последний богатырь (2017)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/19-prostaya-prosba-a-simple-favor-2018.html" title="Простая просьба (2018)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Простая просьба (2018) (A Simple Favor)  трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Простая просьба (2018)" />
        <span>Простая просьба (2018)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/18-most-v-terabitiyu-bridge-to-terabithia-2006.html" title="Мост в Терабитию (2006)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Мост в Терабитию (2006) (Bridge to Terabithia)  трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Мост в Терабитию (2006)" />
        <span>Мост в Терабитию (2006)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/17-misterium-ohotniki-na-fazanov-fasandraeberne-2014.html" title="Мистериум: Охотники на фазанов (2014)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Мистериум: Охотники на фазанов (2014) (Fasandræberne) смотреть онлайн, а также трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Мистериум: Охотники на фазанов (2014)"
        />
        <span>Мистериум: Охотники на фазанов (2014)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/16-pipec-kick-ass-2010.html" title="Пипец (2010)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Пипец (2010) (Kick-Ass) смотреть онлайн, а также трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Пипец (2010)" />
        <span>Пипец (2010)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/15-pulya-bullet-2013.html" title="Пуля (2013)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм Пуля (2013) (Bullet) смотреть онлайн, а также трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="Пуля (2013)" />
        <span>Пуля (2013)</span>
      </a>
    </div>

    <div class="filmhit">


      <a href="https://sefil.ru/films/13-11-intouchables-2011.html" title="1+1 (2011)">
        <div class="filmshadow"></div>
        <img src="https://sefil.ru/uploads/posts/2023-02/1676715691-1717811566-opasnaya-priroda.webp" alt="Фильм 1+1 (2011) (Intouchables)  трейлер, актеры, отзывы и другая информация на СеФил.РУ" title="1+1 (2011)" />
        <span>1+1 (2011)</span>
      </a>
    </div>

  </div>
</div>