多元素共用accesskey：如何在Edge浏览器中模拟IE的激活行为？

Edge（基于Chromium内核）与IE对重复accesskey属性的处理逻辑存在差异：Edge默认激活最后一个拥有该accesskey的元素，而IE则是按DOM顺序循环激活下一个匹配元素。要在Edge中模拟IE的行为，你可以通过拦截键盘事件、手动管理元素激活顺序来实现，具体方案如下：

实现步骤与代码 #

1. 分组存储同accesskey的元素 #

首先按accesskey值对页面元素分组，保持元素在DOM中的出现顺序：

// 按accesskey值分组，存储对应DOM元素（保留原始顺序）
const accessKeyGroups = {};
document.querySelectorAll('[accesskey]').forEach(element => {
    const key = element.accesskey.toLowerCase();
    if (!accessKeyGroups[key]) {
        accessKeyGroups[key] = [];
    }
    accessKeyGroups[key].push(element);
});

// 记录每个accesskey当前激活的元素索引
const currentActiveIndices = {};

2. 拦截accesskey触发事件，手动处理激活逻辑 #

监听全局键盘事件，识别accesskey组合键，阻止默认行为后按循环逻辑激活元素：

document.addEventListener('keydown', (event) => {
    // 判断是否为accesskey组合键：Windows是Alt+按键，Mac是Ctrl+Alt+按键
    const isAccessKeyTrigger = (event.altKey && !event.ctrlKey) || 
                              (event.ctrlKey && event.altKey && navigator.platform.includes('Mac'));
    if (!isAccessKeyTrigger) return;

    const targetKey = event.key.toLowerCase();
    const targetElements = accessKeyGroups[targetKey];
    // 只有单个元素的情况，保留浏览器默认行为即可
    if (!targetElements || targetElements.length <= 1) return;

    // 阻止Edge默认激活最后一个元素的行为
    event.preventDefault();
    event.stopPropagation();

    // 更新当前激活索引，循环切换
    currentActiveIndices[targetKey] = (currentActiveIndices[targetKey] ?? -1) + 1;
    if (currentActiveIndices[targetKey] >= targetElements.length) {
        currentActiveIndices[targetKey] = 0;
    }

    // 激活目标元素：根据元素类型执行对应操作
    const activeElement = targetElements[currentActiveIndices[targetKey]];
    if (['A', 'BUTTON'].includes(activeElement.tagName)) {
        activeElement.click();
    } else {
        activeElement.focus();
        // 若需触发点击事件，可取消下方注释
        // activeElement.dispatchEvent(new Event('click'));
    }
});

3. 动态元素适配（可选） #

如果页面存在动态加载的元素，需要在元素加载完成后重新执行分组逻辑，或通过MutationObserver监听DOM变化自动更新分组：

// 监听DOM变化，自动更新accesskey分组
const observer = new MutationObserver(() => {
    // 重新执行分组逻辑
    const newAccessKeyGroups = {};
    document.querySelectorAll('[accesskey]').forEach(element => {
        const key = element.accesskey.toLowerCase();
        if (!newAccessKeyGroups[key]) {
            newAccessKeyGroups[key] = [];
        }
        newAccessKeyGroups[key].push(element);
    });
    Object.assign(accessKeyGroups, newAccessKeyGroups);
});

// 监听整个文档的元素添加/移除
observer.observe(document.body, { childList: true, subtree: true });

注意事项 #

• 不同操作系统的accesskey组合键存在差异，代码已做基础适配
• 针对不同类型的元素（如输入框、下拉框等），可调整激活逻辑（仅聚焦或触发点击）
• 若页面有自定义的键盘事件监听，需注意事件优先级，避免冲突

内容的提问来源于stack exchange，提问作者Christian O.