解决vue在某元素全屏时,点击 ESC 按键,监听不到addEventListener(‘keydown‘事件
·
原因:在某个元素全屏时,点击 ESC 按键无法被正常捕获的原因是与焦点有关。当按下 ESC 键时,焦点落在文档上而不是目标元素上。
思路:查阅了一些解决方法后,发现都是将焦点恢复到目标元素上,但是并没有解决我的问题,在过程中,发现了fullscreenchange事件监听器,只要监听到全屏事件,改变了状态,就可以实现我的功能,关键代码如下。
<script>
export default {
mounted() {
// 添加全屏事件监听器
const fullscreenElement = this.$refs.fullscreenElement;
fullscreenElement.addEventListener('fullscreenchange', () => {
if (this.isElementFullScreen()) {
fullscreenElement.focus();
} else {
this.setIsFullScreen(false)
}
});
},
methods:{
// 判断当前目标元素是否处于全屏状态
isElementFullScreen() {
const fullScreenElement =
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement;
return fullScreenElement === this.$refs.fullscreenElement;
},
};
</script>
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)