Question

我有一个水平滚动div也可以拖动。该div中的元素是链接。每次我离开拖动时，它都会触发点击并将我发送到链接。有没有一种方法可以阻止拖动后单击，但在不拖动时保持可用？

这是一个片段：

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>

我将不胜感激。谢谢！尼尔

Answer 1

我可以建议一种方法。

定义功能 preventClick

const preventClick = (e) => {
        e.preventDefault();
        e.stopImmediatePropagation();
      }

定义变量isDragged以有条件地添加和删除事件侦听器。

let isDragged = false;

在mouseup事件中，您输入2种情况，isDragged = false（在单击的情况下）或isDragged = true（在拖动的情况下< / strong>）

第一种情况： 删除阻止点击传播的eventListener

第二种情况： 添加防止点击传播的事件监听器。

请尝试以下代码，如果有帮助，请告诉我。请注意，这不是经过优化的代码。我将为所有锚标记添加和删除事件处理程序，只是为了演示您可以遵循的方法。

const slider = document.querySelector(".wrapper"); const preventClick = (e) => { e.preventDefault(); e.stopImmediatePropagation(); } let isDown = false; var isDragged = 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", e => { isDown = false; const elements = document.getElementsByClassName("book"); if(isDragged){ for(let i = 0; i<elements.length; i++){ elements[i].addEventListener("click", preventClick); } }else{ for(let i = 0; i<elements.length; i++){ elements[i].removeEventListener("click", preventClick); } } slider.classList.remove("active"); isDragged = false; }); slider.addEventListener("mousemove", e => { if (!isDown) return; isDragged = true; e.preventDefault(); const x = e.pageX - slider.offsetLeft; const walk = (x - startX) * 2; slider.scrollLeft = scrollLeft - walk; }); document.getElementsByClassName("book").ondragstart = function() { console.log("Drag start"); };

.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>

防止在离开拖动时在js中滚动时单击

1 个答案: