Javascript 防止拖动时单击事件

我问了一个相关的问题

如果拖动，我将尝试停止单击事件

我认为最简单的版本就是拖拉你自己。基本上，如果用户按下，然后移动，然后释放，我不想要点击事件

注意，下面的代码并不是试图允许点击，它只是试图阻止点击。我认为在mouseup中调用preventDefault会告诉浏览器，不要做默认的事情，因为用户松开鼠标而发送一个click事件

让dragTarget； 让dragMouseStartX； 让dragMouseStartY； 让dragTargetStartX； 让dragTargetStartY； 常量px=v=>`${v}px`； 函数dragStarte{ e、 防止违约； e、 停止传播； dragTarget=此； const rect=this.getBoundingClientRect； dragMouseStartX=e.pageX； dragMouseStartY=e.pageY； dragTargetStartX=window.scrollX+rect.left | 0； dragTargetStartY=window.scrollY+rect.top | 0； addEventListener'mousemove'，dragMove，{passive:false}； addEventListener'mouseup'，dragStop，{passive:false}； } 函数dragMovee{ 如果拖动目标{ e、 防止违约； e、 停止传播； 常数x=dragTargetStartX+e.pageX-dragMouseStartX； 常数y=dragTargetStartY+e.pageY-dragMouseStartY； dragTarget.style.left=pxx； dragTarget.style.top=pxy； } } 函数dragStope{ e、 防止违约； e、 停止传播； dragTarget=未定义； window.removeEventListener'mousemove'，dragMove； 窗口。移除VentListener'mouseup'，拖动顶部； } document.querySelector.drag.addEventListener.mousedown.dragStart； document.querySelector'.drag'.addEventListener'单击'，=>{ 控制台。日志“点击”，新日期； }; 身体{高度：100vh；} .拖动{ 背景：红色； 颜色：白色； 填充：1em； 位置：绝对位置； 用户选择：无； 光标：指针； }

---

拖动并释放我我认为它的工作原理是，在同一个元素上发生鼠标点击和鼠标下降后，单击会触发，而不必等待它们执行什么操作，例如试图阻止单击的发生

我见过的阻止这种情况发生的最简单方法是在拖动时禁用该元素的指针事件。它会在拖动时将光标更改为默认值，这不是最佳的，但可能是可以避免的，这仍然是我最喜欢的解决方案。例如：

让dragTarget； 让dragMouseStartX； 让dragMouseStartY； 让dragTargetStartX； 让dragTargetStartY； 常量px=v=>`${v}px`； 函数dragStarte{ dragTarget=此； dragTarget.classList.AddDraging； const rect=this.getBoundingClientRect； dragMouseStartX=e.pageX； dragMouseStartY=e.pageY； dragTargetStartX=window.scrollX+rect.left | 0； dragTargetStartY=window.scrollY+rect.top | 0； addEventListener'mousemove'，dragMove，{passive:false}； addEventListener'mouseup'，dragStop，{passive:false}； 返回false； } 函数dragMovee{ 如果拖动目标{ e、 防止违约； e、 停止传播； 常数x=dragTargetStartX+e.pageX-dragMouseStartX； 常数y=dragTargetStartY+e.pageY-dragMouseStartY； dragTarget.style.left=pxx； dragTarget.style.top=pxy； } } 函数dragStope{ dragTarget.classList.removedragging； dragTarget=未定义； window.removeEventListener'mousemove'，dragMove； 窗口。移除VentListener'mouseup'，拖动顶部； } document.querySelector.drag.addEventListener.mousedown.dragStart； document.querySelector'.click'.addEventListener'click'，=>{ 控制台。日志“点击”，新日期； }; 身体{高度：100vh；} .拖动{ 背景：蓝色； 颜色：白色； 填料：2米； 位置：绝对位置； 用户选择：无； 光标：指针； } .点击{ 填充：1em； 背景：红色； } .拖{ 指针事件：无； }

---

拖动并释放meaddEventListener有一个可选的第三个参数，称为capture，它指示在调用任何其他元素的事件函数之前调用您的函数。通过将其设置为true并应用于根元素窗口，您可以通过设置标志简单地关闭所有单击事件

让ignoreClicks=true；//切换我以打开单击事件 document.getElementById“d1”。addEventListener“click”，函数{console.log“d1”；}； document.getElementById'd2'。addEventListener'click'，函数{console.log'd2'；}； window.addEventListener“单击”，函数事件{ 如果ignoreClicks event.stopPropagation； }，对；

---

如果移动dragTarget.addClass而不是mousemove函数的if dragTarget，这将非常有用。