单击并拖动 Firefox 中的链接会阻止 mouseup 事件

Question

我想实现一个水平点击和拖动的网站，它在 Chrome 中完美运行，但在 Firefox 中不完美。

我的问题： 在 Firefox 中单击并拖动链接会使停止图标出现在光标旁边，然后阻止 mouseup 事件。

我所知道的： 问题只出现在链接上，我发现这个 post (javascript and dragging in 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>

Answer 1

解决方案：要解决您可以执行的问题

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

这里是 link :https://codepen.io/greg_o/pen/jQrMON

单击并拖动 Firefox 中的链接会阻止 mouseup 事件

Click and drag on links in Firefox are blocking mouseup events

javascript

html

css

firefox

mouseevent