Нажмите и перетащите на ссылки в Firefox блокируют события mouseup - PullRequest
Новая
       8

Нажмите и перетащите на ссылки в Firefox блокируют события mouseup

0 голосов
/ 09 ноября 2018

Я хочу добиться горизонтального клика и перетаскивания веб-сайта, он отлично работает в Chrome, но не в Firefox.

Моя проблема: Если щелкнуть и перетащить ссылки в Firefox, значок остановки появляется рядом с курсором и затем блокируется событие mouseup.

Что я знаю: Проблема появляется только на ссылках, и я нашел этот пост ( javascript и перетаскивание в firefox ), который предлагает использовать addEventListener на document, но это не исправило это.

Старый код ниже (чтобы увидеть обновленный код, перейдите на codepen) 

const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;

document.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
document.addEventListener('mouseleave', () => {
  isDown = false;
  slider.classList.remove('active');
});
document.addEventListener('mouseup', () => {
  isDown = false;
  slider.classList.remove('active');
});
document.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 3; //scroll-fast
  slider.scrollLeft = scrollLeft - walk;
  console.log(walk);
});

HTML 

    <div class="grid-container">

  <main class="grid-item main">
    <div class="items">
      <a class="item item1" href="#"></a>
      <a class="item item2" href="#"></a>
      <a class="item item3"></a>
      <a class="item item4"></a>
      <div class="item item5"></div>
      <div class="item item6"></div>
      <div class="item item7"></div>
      <div class="item item8"></div>
      <div class="item item9"></div>
      <div class="item item10"></div>
    </div>
    <p>Click & Drag <i>powered by Javascript</i></p>
  </main>
</div>

1 Ответ

0 голосов
/ 10 ноября 2018

РЕШЕНИЕ: Чтобы решить проблему, вы можете сделать 

const links = document.querySelectorAll('a');
links.forEach(element => {element.addEventListener('mousedown',function(e) { 
  e.preventDefault();
})
})

Вот ссылка: https://codepen.io/greg_o/pen/jQrMON

...