我对了解事件系统有疑问

我有以下代码：

<template>

  <div class="chart"
       v-bind:style="chartStyleObject"
       v-on:mousedown.left="initHandleMousedown($event)"
       v-on:mouseup.left="initHandleMouseup()"
       v-on:mouseout="initHandleMouseup()">

    <div class="chartContent">
    </div>
    <!--   <div class="chartContent">  end   -->

  </div>
  <!--   <div class="chart">   end   -->

</template>

<script>
  import axios from 'axios';

export default{

created () {
},

data () {
  return {
    ticket: null,

    chartStyleObject: {
      width: '500px',
      widthWrapper: '1600px',
      heightWrapper: '500px',
      height: '247px',
      marginTop: '15px',
      marginRight: '0px',
      marginBottom: '0px',
      marginLeft: '15px',
    },

    XCoord: null,
    YCoord: null,

  }
},

methods: {

  initHandleMousedown(event) {
    this.startMousedownXCoord = event.clientX;
    this.startMousedownYCoord = event.clientY;
    this.XCoord = event.clientX;
    this.YCoord = event.clientY;

    console.log('XCoord', this.XCoord);
    console.log('YCoord', this.YCoord);

    window.addEventListener('mousemove', this.initHandleMouseMove);
  },

  initHandleMouseMove(event) {

      this.XCoord = event.clientX;
      this.YCoord = event.clientY;

      console.log('XCoord', this.XCoord);
      console.log('YCoord', this.YCoord);

  },

  initHandleMouseup() {
    window.removeEventListener('mousemove', this.initHandleMouseMove);
  },

  },

}

</script>

<style scoped>

.chart{
  position: relative;
  border-radius: 10px;
  padding: 27px 10px 10px 10px;
  background-color: #45788b;
  box-sizing: border-box;
  cursor: move;
}
.chart .chartContent{
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0 0 0 0;
  background-color: #2f2c8b;
}



</style>

HTML design consists of 2 blocks:
(parent and child)
The event is tied to the parent tag `<div class =" chart ">`
Also, the parent block has padding on all 4 sides:

如果单击父块并用鼠标驱动（按住按钮）而不影响填充空间，则将触发mousemove事件而不会出现问题。但是，一旦鼠标光标触摸了填充区域，事件就会停止起作用。
如果单击填充，事件也将正常运行-但是，如果我将鼠标光标移到填充外部（内部空间）之外的块空间上，该事件将停止工作。
问题：
为什么会发生这种情况-对于js + nuxt，此行为是否正常？ .js？