threejs的DragControls当click时会触发dragstart和dragend问题解决

最新推荐文章于 2025-03-11 15:08:32 发布

骑着猪狂跑

最新推荐文章于 2025-03-11 15:08:32 发布

阅读量506

点赞数

文章标签： webgl

本文链接：https://blog.youkuaiyun.com/qq_37200686/article/details/133313511

版权

文章讨论了在使用THREE.js的DragControls时，如何避免click事件触发dragstart和dragend，从而误判为拖拽操作的问题，提出通过监听drag和dragend事件并在适当条件下设置dragging标志来解决此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

当拖拽结束后，会触发效果一，当click时会触发效果二。但是实际上，当我click时会触发DragControls的dragstart和dragend事件，导致我做了一次拖拽操作。

解决：

当click时鼠标事件如下：

dragstart
mousedown
dragend
mouseUp
click

我发现，当click时只会触发dragstart 和 dragend 事件，这样我们可以通过是否触发了drag事件去判断是否是拖拽

let draging = false
this.controls.addEventListener('drag', (e: THREE.Event) => {
    draging = true;
})

this.controls.addEventListener('dragend', (e: THREE.Event) => {
    if(!draging){ return }
    // 做拖拽结束的效果...
    draging = false;
})