Javascript 如何防止单击拖动？

我正在尝试创建一个包含拖放和单击事件的元素。我已经阅读并尝试了以下几种方法的组合

然而，无论我尝试什么，当拖动停止时，我都会得到一个单击

注意，在MWE中，这是在组件本身上完成的，但在我的实际应用程序中，我使用

.native

修改器来拖动组件

我怎么能不点击就拖动

组件

可拖动

：

<template>
  <div
    @pointerdown="handleDown"
    @pointerup="handleUp"
    @pointercancel="handleUp"
    @click="click = !click;"
    :style="style"
    ref="draggableRoot"
    class="draggable"
  >
    drag me!<br />
    am dragged? {{ drag }}<br />
    am clicked? {{ click }}<br />
  </div>
</template>
<script>
export default {
  computed: {
    style() {
      return {
        left: `${this.x}px`,
        top: `${this.y}px`
      };
    }
  },
  data() {
    return {
      x: 100,
      y: 100,
      left: 0,
      top: 0,
      drag: false,
      click: false
    };
  },
  methods: {
    handleMove({ pageX, pageY, clientX, clientY }) {
      if (this.$refs.draggableRoot) {
        this.x = pageX + this.left;
        this.y = pageY + this.top;
        this.drag = true;
      }
    },
    handleDown(event) {
      const { pageX, pageY } = event;
      const { left, top } = this.$refs.draggableRoot.getBoundingClientRect();
      this.left = left - pageX;
      this.top = top - pageY;
      document.addEventListener("pointermove", this.handleMove);
    },
    handleUp() {
      document.removeEventListener("pointermove", this.handleMove);
      this.drag = false;
    }
  }
};
</script>
<style scoped>
.draggable {
  position: fixed;
  border: solid coral 1px;
  height: 100px;
}
</style>

拖我

我被拖走了？{{drag}}

点击了吗？{{点击}}

导出默认值{
计算：{
样式（）{
返回{
左：`${this.x}px`，
顶部：`${this.y}px`
};
}
},
数据（）{
返回{
x:100，
y:100，
左:0,，
排名：0，
拖：错，
单击：false
};
},
方法：{
handleMove（{pageX，pageY，clientX，clientY}）{
if（此$refs.draggableRoot）{
this.x=pageX+this.left；
this.y=pageY+this.top；
this.drag=true；
}
},
handleDown（事件）{
const{pageX，pageY}=事件；
const{left，top}=this.$refs.draggableRoot.getBoundingClientRect（）；
this.left=left-pageX；
this.top=top-pageY；
文件.addEventListener（“pointermove”，本.handleMove）；
},
handleUp（）{
document.removeEventListener（“pointermove”，this.handleMove）；
this.drag=false；
}
}
};
.拖拉{
位置：固定；
边框：实心珊瑚1px；
高度：100px；
}

也许这样可以：

将

setTimeout

添加到方法

handleUp

中：

handleUp() { 
  document.removeEventListener("pointermove", this.handleMove);
  setTimeout(() => this.drag = false) //this would move this assigment at the end of event queue
}

同时添加新的方法

handleClick

，并将其分配到事件

@单击

：

handleClick() {
  if(!this.drag) { //change click only if not draged
    this.click = !this.click
  }
}

---

不知道？也许他们用的是Safair？这适用于Moz和Chrome。知道如何让它在Safair中工作吗？我没有办法测试它，但也许可以尝试在

setTimeout

上添加非常小的延迟，比如50ms。尝试设置超时（（）=>this.drag=false，50）在Safari中，超时似乎是正常的，这是一起拖动：p。我会调查的。同时，我会等待答案，看看是否有vue原生的方法来解决这个问题：）谢谢你的帮助