Nuxt.js中父元素padding区域鼠标拖动事件异常原因咨询

核心问题：mouseout事件的触发逻辑不符合预期 #

你遇到的现象完全是原生DOM事件的特性导致的，和Nuxt.js无关，属于正常的浏览器行为。

先拆解你的场景：
你的父元素.chart设置了padding，内部还有子元素.chartContent。你给.chart绑定了mouseout事件，而mouseout的触发规则是：

当鼠标离开当前元素或者它的任何子元素时，就会触发该元素的mouseout事件

这直接导致了两种现象：

1. 点击.chartContent（非padding区）拖动时，鼠标移到.chart的padding区：此时鼠标离开了子元素.chartContent，会触发.chart的mouseout事件，调用initHandleMouseup()移除了mousemove监听，所以事件停止工作。
2. 点击padding区拖动时，鼠标移到.chartContent内部：此时鼠标离开了.chart自身的padding区域（进入子元素），同样会触发.chart的mouseout事件，导致监听被移除，事件停止。

解决方案：用mouseleave替代mouseout #

mouseleave事件的触发规则是：

只有当鼠标完全离开当前元素的整个范围（包括它的padding、子元素所在的所有区域）时，才会触发该事件

把模板中的mouseout换成mouseleave即可解决问题：

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

这样无论你在.chart的padding区和.chartContent之间怎么移动，都不会触发mouseleave，只有当鼠标真正移出整个.chart区块时，才会停止mousemove监听，完全符合你的拖动需求。

额外验证小技巧 #

你可以在initHandleMouseup里加一行日志，直观感受触发时机的变化：

initHandleMouseup() {
  console.log('停止拖动监听');
  window.removeEventListener('mousemove', this.initHandleMouseMove);
},

替换成mouseleave后，只有当鼠标移出整个.chart时才会打印这条日志，内部移动不会触发，能清晰看到两种事件的差异。

内容的提问来源于stack exchange，提问作者Mikhail Krivosheev