如何阻止Google Maps InfoWindow自动聚焦其内部首个可点击元素
Google Maps InfoWindow 自动聚焦问题解决方案
这个自动聚焦行为是Google Maps JavaScript API v3.45及以上版本为优化无障碍访问默认新增的逻辑,InfoWindow打开时会主动定位到内部第一个可交互元素。
以下是两种可行的禁用方案:
- 方案1:使用官方原生配置(推荐,适配3.45+所有版本)
初始化InfoWindow时在配置参数中添加focus: false,即可直接关闭自动聚焦逻辑,代码示例:
该配置为官方针对该场景专门提供的参数,无额外副作用,适配你当前使用的3.45.8版本。const infoWindow = new google.maps.InfoWindow({ content: '自定义HTML内容', // 你的原有InfoWindow内容配置 focus: false // 新增此行禁用自动聚焦 }); - 方案2:手动触发失焦(适配特殊自定义场景)
如果存在自定义的交互逻辑不适合直接用官方配置,可监听InfoWindow的domready事件,在内容渲染完成后手动取消当前聚焦:const infoWindow = new google.maps.InfoWindow({ content: '自定义HTML内容' }); // 监听InfoWindow内容渲染完成事件 infoWindow.addListener('domready', () => { // 取消当前激活元素的聚焦状态 if (document.activeElement) { document.activeElement.blur(); // 也可选择将焦点重置到body元素上 // document.body.focus(); } });
内容的提问来源于stack exchange,提问作者mortenma71
相关产品推荐
相关产品推荐

