vue实现拖拽移动盒子以及修饰符stop阻止冒泡失败踩坑

vue实现拖拽移动盒子以及修饰符stop阻止冒泡失败踩坑

今天下午有个需求，有两个盒子，一个父盒子，一个子盒子，子盒子绑定了一个点击事件，拖动父盒子能够拽动父盒子，代码如下：

<template>
  <div id="app">
    {{ positionX }}
    {{ positionY }}
    <div @mousedown="move" class="out" >
      <div class="in" @click="clickIn"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      positionX: 0,
      positionY: 0,
    };
  },
  methods: {
    clickIn(e) {
      console.log("我在里面，我被点击了");
    },
    move(e) {
      console.log("我在外面，我被拽着走");
      let odiv = e.target; //获取目标元素
     
      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e) => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;

        //移动当前元素
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
  },
};
</script>
<style lang="scss">

body {
  margin: 0;
  padding: 0;
}
.out {
  position: relative;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 200px;
  background-color: aqua;
}
.in {
  background: azure;
  width: 100px;
  height: 100px;
  z-index: 22;
}
</style>

当我点击子盒子时，我发现父盒子的事件也被触发了。
此时，我第一个想法是事件冒泡了，于是我给子盒子的点击事件添加了
但是，加上以后，父盒子的事件依然被触发了

原因：因为stop阻止冒泡，只能阻止同类型的事件冒泡，如click只能组织click事件冒泡

解决：在子盒子中加入@mousedown.stop

问题解决