检测iPhone和iPad设备上Safari浏览器对oncontextmenu事件的支持情况

1. 为什么"oncontextmenu" in window返回true但事件不触发？ #

iOS Safari在DOM接口上保留了oncontextmenu属性，这是为了符合W3C的DOM标准规范，保证API层面的兼容性——毕竟这个属性是window对象的标准成员。但在触摸交互逻辑上，苹果将长按操作绑定到了系统级菜单（比如复制、粘贴、文本选择），不会把contextmenu事件传递给网页的事件处理器。简单说就是：属性存在是为了API兼容，但实际事件被系统拦截，不会触发网页的回调。

2. 不依赖设备检测，如何验证浏览器是否真正支持触发oncontextmenu？ #

可以通过动态创建测试元素并模拟触发contextmenu事件的方式检测，核心逻辑是：如果浏览器能正常触发该事件，绑定的回调就会执行。示例代码如下：

function doesSupportContextMenu() {
  let isSupported = false;
  const testEl = document.createElement('div');

  // 绑定contextmenu事件回调
  testEl.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    isSupported = true;
  });

  // 创建并触发模拟右键事件
  const evt = new MouseEvent('contextmenu', {
    bubbles: true,
    cancelable: true,
    button: 2 // 指定右键触发
  });
  testEl.dispatchEvent(evt);

  // 清理测试元素
  testEl.remove();

  return isSupported;
}

调用该函数，返回true说明浏览器能正常触发contextmenu事件；返回false则说明事件被拦截（比如iOS Safari的情况）。

需要注意：如果用户在浏览器设置中手动禁用了上下文菜单，这个方法也会返回false，但这属于用户主动设置，而非浏览器本身不支持。

内容的提问来源于stack exchange，提问作者Resiel