Javascript 我对事件系统的理解有问题

我有以下代码：

从“axios”导入axios；
导出默认值{
创建（）{
},
数据（）{
返回{
票证：空，
chartStyleObject：{
宽度：“500px”，
widthWrapper:'1600px'，
heightWrapper:'500px'，
高度：'247px'，
marginTop:'15px'，
marginRight:“0px”，
marginBottom:'0px'，
marginLeft:'15px'，
},
XCoord:null，
YCoord:null，
}
},
方法：{
initHandleMousedown（事件）{
this.startMousedownXCoord=event.clientX；
this.startMousedownYCoord=event.clientY；
this.XCoord=event.clientX；
this.YCoord=event.clientY；
log（'XCoord'，this.XCoord）；
console.log（'YCoord'，this.YCoord）；
window.addEventListener（'mousemove'，this.initHandleMouseMove）；
},
initHandleMouseMove（事件）{
this.XCoord=event.clientX；
this.YCoord=event.clientY；
log（'XCoord'，this.XCoord）；
console.log（'YCoord'，this.YCoord）；
},
initHandleMouseup（）{
window.removeEventListener（'mousemove'，this.initHandleMouseMove）；
},
},
}
.图表{
位置：相对位置；
边界半径：10px；
填充：27px 10px 10px 10px；
背景色：#45788b；
框大小：边框框；
光标：移动；
}
.图表.图表内容{
位置：相对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
保证金：0；
背景色：#2f2c8b；
}

我不能完全理解您对页面各个区域的描述，但我可以试着解释一下您看到的内容

关键是你有一个

mouseout

监听器，可以删除你的

mousemove

监听器。

mouseout

事件会传播，这意味着即使在子元素上发生了

mouseout

，它也会触发。与

mouseleave

相反，mouseleave只有在元素本身发生事件时才会触发

下面的示例说明了即使鼠标光标没有离开根元素，

mouseout

侦听器也将如何激发。只需将光标移到子对象之外就足够了

document.getElementById（'outer'）.addEventListener（'mouseout'，（）=>{
document.getElementById（'out'）.innerHTML+='mouseout\n
})

div{
边框：1px实心；
显示：内联块；
填充：20px；
}

---

答案正确。我提供这个答案只是为了说明如何使用您自己的代码来实现它。我唯一更改的行是：mouseleave=“initHandleMouseup（）。请注意，我将其更改为mouseout to mouseleave

总结如下：

• mouseleave

  对每个元素触发一次，而不考虑其子元素 悬停

• mouseout

  每次元素被放弃时都会触发（无论 移动鼠标或将鼠标悬停在其子对象上）

newvue({
el:“应用程序”，
模板：`
`,
已创建：函数（）{}，
数据（）{
返回{
票证：空，
chartStyleObject：{
宽度：“500px”，
widthWrapper:'1600px'，
heightWrapper:'500px'，
高度：'247px'，
marginTop:'15px'，
marginRight:“0px”，
marginBottom:'0px'，
marginLeft:'15px'，
},
XCoord:null，
YCoord:null，
}
},
方法：{
initHandleMousedown:函数（事件）{
this.startMousedownXCoord=event.clientX；
this.startMousedownYCoord=event.clientY；
this.XCoord=event.clientX；
this.YCoord=event.clientY；
log（'XCoord'，this.XCoord）；
console.log（'YCoord'，this.YCoord）；
window.addEventListener（'mousemove'，this.initHandleMouseMove）；
},
initHandleMouseMove:函数（事件）{
this.XCoord=event.clientX；
this.YCoord=event.clientY；
log（'XCoord'，this.XCoord）；
console.log（'YCoord'，this.YCoord）；
},
initHandleMouseup:函数（）{
window.removeEventListener（'mousemove'，this.initHandleMouseMove）；
}
}
})；

.chart{
位置：相对位置；
边界半径：10px；
填充：27px 10px 10px 10px；
背景色：#45788b；
框大小：边框框；
光标：移动；
}
.图表.图表内容{
位置：相对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
保证金：0；
背景色：#2f2c8b；
}

---

@Alex你能详细说明悬赏的具体用途吗？如果你只是想获得MDN相关部分的链接，你可以在我的答案上发表评论，所以我想你要的不仅仅是这些。