javascript - 我在理解事件系统时遇到问题

Question

我有这个代码:

<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:

如果您单击父 block 并用鼠标驱动(按住按钮)而不影响填充空间，则 mousemove 事件将毫无问题地触发。但是，一旦鼠标光标触及填充区域，该事件就会停止运行。
如果您单击填充，该事件也会正常工作 - 但如果我将鼠标光标移动到填充外部的 block 空间(内部空间)上，该事件就会停止工作
问题:
为什么会发生这种情况 - 这种行为对于 js + nuxt.js 来说正常吗？

Answer 1

我无法完全理解您对页面各个区域的描述，但我可以尝试解释我认为您所看到的内容。

关键是您有一个 mouseout 监听器，可以删除您的 mousemove 监听器。 mouseout 事件会传播，这意味着即使 mouseout 发生在子元素上，该事件也会触发。与 mouseleave 相比，后者仅在元素本身发生事件时才会触发。

下面的示例说明了即使鼠标光标没有离开根元素，mouseout 监听器也将如何触发。只需将光标移到子级之外就足够了。

document.getElementById('outer').addEventListener('mouseout', () => {
  document.getElementById('out').innerHTML += 'mouseout\n'
})

div {
  border: 1px solid;
  display: inline-block;
  padding: 20px;
}

<div id="outer">
  <div></div>
</div>
<pre id="out"></pre>

我怀疑，当您观察到事件停止运行时，实际发生的情况是发生了 mouseout 事件，并且正在删除 mousemove 监听器。