window.addEventListener只能监听窗口大小,不能监听父盒子
时间: 2023-12-05 10:42:05 浏览: 141
window.addEventListener来解决让一个js事件执行多个函数
非常抱歉,我之前的回答有误。确实,window.addEventListener只能监听窗口的resize事件,无法直接监听父容器的尺寸变化。对于父容器尺寸的变化,可以通过其他方式实现自适应更新。
一种常见的方法是使用MutationObserver来监听父容器的变化。MutationObserver是一个DOM变动观察器,可以监视DOM树的变化并触发回调函数。
以下是一个示例代码,展示如何使用MutationObserver监听父容器尺寸的变化并调用echarts的resize方法:
```javascript
var chart = echarts.init(document.getElementById('chart-container'));
// 创建一个MutationObserver实例
var observer = new MutationObserver(function() {
chart.resize();
});
// 监听父容器的变化
observer.observe(document.getElementById('parent-container'), {
attributes: true, // 监听属性变化
attributeFilter: ['style'], // 监听style属性的变化
childList: false, // 不监听子节点变化
subtree: false // 不监听后代节点变化
});
```
在上面的代码中,我们创建了一个MutationObserver实例,并使用observe方法将其绑定到父容器上。通过配置参数,我们指定只监听父容器的style属性变化。当父容器的style属性发生改变时,MutationObserver会触发回调函数,我们在回调函数中调用echarts的resize方法来更新图表。
请确保将上面的代码适当地替换成您实际使用的父容器和图表容器的id。
希望这次的回答对您有帮助。如果还有其他问题,请随时提问。
阅读全文