在Firefox中单击并拖动链接会阻止mouseup事件 [英] Click and drag on links in Firefox are blocking mouseup events

问题描述

我想建立一个水平的点击和拖拽网站，它在Chrome中可完美运行，但在Firefox中却不能.

I want to achieve an horizontal click and dragg website, it works perfectly in Chrome but not in Firefox.

我的问题:单击并拖动Firefox中的链接会使停止图标显示在光标旁边，然后阻止了mouseup事件.

My problem : Click and dragg on links in Firefox is making the stop-icon appears next to the cursor and then blocking mouseup event.

我所知道的:该问题仅出现在链接上，我发现了这篇文章(

What I know : The problem is only appearing on links and I found this post (javascript and dragging in firefox) that is suggesting to use addEventListener on the document, but it didn't fix it.

下面的旧代码(以查看更新后的代码继续进行)

Old code below (to see the updated one go on 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>

推荐答案

解决方案:要解决此问题，您可以

SOLUTION : To fix the problem you can do

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

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

这篇关于在Firefox中单击并拖动链接会阻止mouseup事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！