我有一個(gè)也可拖動的水平滾動 div。這個(gè) div 里面的元素是鏈接。每次我離開拖動它都會觸發(fā)點(diǎn)擊并將我發(fā)送到鏈接。有沒有辦法可以在離開拖動后阻止點(diǎn)擊，但在不拖動時(shí)保持可用？這是一個(gè)片段：const slider = document.querySelector('.wrapper');let isDown = false;let startX;let scrollLeft;slider.addEventListener('mousedown', (e) => { isDown = true; slider.classList.add('active'); startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft;});slider.addEventListener('mouseleave', () => { isDown = false; slider.classList.remove('active');});slider.addEventListener('mouseup', () => { isDown = false; slider.classList.remove('active');});slider.addEventListener('mousemove', (e) => { if(!isDown) return; e.preventDefault(); const x = e.pageX - slider.offsetLeft; const walk = (x - startX)*2; slider.scrollLeft = scrollLeft - walk;});document.getElementsByClassName('.book').ondragstart = function() { return false; };.wrapper { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: auto; min-width: 100%;}.book { width: auto; height: 100vh; min-width: 50vw;}.one { background-color: #d07fe0; } .two { background-color: #808888; } .three { background-color: #83e7dc; } .four { background-color: #edf7a8; } .five { background-color: #e9d98f; } .six { background-color: #fdd; } <body><div class="wrapper"> <a href="https://stackoverflow.com/" class="book one"></a> <a href="https://stackoverflow.com/" class="book two"></a> <a href="https://stackoverflow.com/" class="book three"></a> <a href="https://stackoverflow.com/" class="book four"></a> <a href="https://stackoverflow.com/" class="book five"></a> <a href="https://stackoverflow.com/" class="book six"></a></div></body>
防止在離開拖動時(shí)單擊以在 js 中滾動
慕運(yùn)維8079593
2021-11-18 16:09:46
