单击并拖动 Firefox 中的链接会阻止 mouseup 事件
Click and drag on links in Firefox are blocking mouseup events
我想实现一个水平点击和拖动的网站,它在 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>
解决方案:要解决您可以执行的问题
const links = document.querySelectorAll('a');
links.forEach(element => {element.addEventListener('mousedown',function(e) {
e.preventDefault();
})
})
这里是 link :https://codepen.io/greg_o/pen/jQrMON
我想实现一个水平点击和拖动的网站,它在 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>
解决方案:要解决您可以执行的问题
const links = document.querySelectorAll('a');
links.forEach(element => {element.addEventListener('mousedown',function(e) {
e.preventDefault();
})
})
这里是 link :https://codepen.io/greg_o/pen/jQrMON