我正在使用matchMedia()。addListener来检测Safari中的暗/亮模式主题首选项更改,但是在WebStorm中,使用addListener标记为已弃用,只是说要参考文档以替代它。
我已经通读了MDN文档,但我不明白我应该在addEventListener中侦听哪种事件类型来替换addListener?
window.matchMedia("(prefers-color-scheme: dark)").addListener(() => this.checkNative());
window.matchMedia("(prefers-color-scheme: light)").addListener(() => this.checkNative());
从文档-https: //developer.mozilla.org/zh-CN/docs/Web/API/MediaQueryList/addListener
表示您要在媒体查询状态更改时运行的回调函数的函数或函数引用。
应该是change
事件。https://developer.mozilla.org/zh-CN/docs/Web/API/MediaQueryList/onchange。
const mql = window.matchMedia("(prefers-color-scheme: dark)");
mql.addEventListener("change", () => {
this.checkNative();
});
TypeError:window.matchMedia(“(prefers-color-scheme:dark)”)。addEventListener不是一个函数。
你得到什么
mql
?这是预期的MediaQueryList
@MattCowley-我没有太多的想法
matchMedia
,但是developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/…中 提供的示例window.matchMedia('(max-width: 600px)');
可以完美地工作。嗯,看起来Safari尚不支持此功能,但addListener却支持。真奇怪