在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屋!