监听鼠标移出该 div
代码
const ele = document.getElementById('container')
if (ele) {
ele.addEventListener('mouseleave', event => {
saveData(model.model, graph, graphRef.current)
return () => {
ele.removeEventListener('mouseleave', () => {
saveData(model.model, graph, graphRef.current)
})
}
})
}
注意事项
- 注意判断 有没有取到被监听的元素,否则报错 xxx is null
1.1 if 判断,存在再监听
1.2 Dom 内容加载完成后再监听(即先监听页面 dom 是否加载完成)
window.addEventListener('DOMContentLoaded', event => {
const el = document.getElementById('overlayBtn')
if (el) {
el.addEventListener('click', Fn)
}
return () => {
ele.removeEventListener('click', Fn)
}
})
- 添加监听事件后最终 return 里需要移出,否则会引起内存泄露
参考
Element:mouseout 事件
前端如何正确的添加、销毁全局事件监听