如何在原生JavaScript中监听浏览器上下文菜单删除事件？兼容Firefox/IE/Opera

嘿，这个问题确实有点棘手，因为浏览器对原生上下文菜单的事件支持一直都比较碎片化，不过咱们可以从几个角度来解决：

右键菜单里的「Delete」选项本质是修改了输入框的内容，所以与其盯着右键菜单的操作，不如直接监听输入框的内容变更——这是跨浏览器最稳定的思路：

• 现代浏览器（包括Firefox、新版Opera）支持标准的input事件，不管是键盘输入、右键删除还是粘贴操作，只要内容变化就会触发。
• 针对旧版IE（IE9及以下），需要补充propertychange事件作为兼容，因为它不支持input事件。

示例代码：

const inputElements = document.querySelectorAll('textarea, input[type="text"]');

// 统一处理内容变化的逻辑
function handleContentChange(e) {
  console.log('输入框内容已修改，可能来自右键删除');
  // 这里可以添加你的业务逻辑，比如对比修改前后的内容差异
}

// 给所有目标元素绑定事件
inputElements.forEach(el => {
  el.addEventListener('input', handleContentChange);
  
  // 兼容旧版IE
  if ('onpropertychange' in el) {
    el.onpropertychange = function() {
      if (event.propertyName === 'value') {
        handleContentChange(event);
      }
    };
  }
});

如果你一定要把操作和右键菜单绑定，可以通过「标记右键菜单状态+内容变化校验」的方式间接判断，但这种方式不够绝对可靠（比如用户打开右键菜单后又点了别的选项）：

1. 先监听contextmenu事件，标记用户打开了右键菜单，同时记录当前选中的文本：

let isContextMenuOpened = false;
let lastSelectedText = '';

document.addEventListener('contextmenu', function(e) {
  const target = e.target;
  if (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && target.type === 'text')) {
    isContextMenuOpened = true;
    // 获取选中文本（兼容旧版IE）
    lastSelectedText = getSelectedText(target);
  }
});

// 点击页面其他区域时标记菜单关闭
document.addEventListener('click', function() {
  isContextMenuOpened = false;
});

// 兼容旧版IE的选中文本获取函数
function getSelectedText(el) {
  if (el.selectionStart !== undefined) {
    return el.value.substring(el.selectionStart, el.selectionEnd);
  } else if (document.selection) {
    const range = document.selection.createRange();
    return range.text;
  }
  return '';
}

2. 在内容变化事件里校验：如果之前打开过右键菜单，且选中的文本消失了，就可以推测是右键删除操作：

function handleContentChange(e) {
  if (isContextMenuOpened && lastSelectedText) {
    if (!e.target.value.includes(lastSelectedText)) {
      console.log('大概率是右键删除了选中的文本');
    }
    isContextMenuOpened = false;
    lastSelectedText = '';
  }
}

• Firefox：对input事件的支持非常完善，右键删除选中内容会立即触发事件，无需额外兼容。
• IE：除了propertychange事件，旧版IE（IE8及以下）获取选中文本需要用document.selection.createRange()，上面的getSelectedText函数已经做了兼容。
• Opera：新版Opera基于Chromium内核，和Chrome行为完全一致，input事件可以覆盖所有内容变更场景；旧版Presto内核的Opera（现在几乎没人用）也可以用input事件，或者补充change事件（但change仅在输入框失去焦点时触发，实时性差）。

不要试图直接捕获上下文菜单里的「Delete」选项点击——浏览器的原生上下文菜单属于系统控件，JavaScript没有权限监听菜单内的具体选项操作，所有方案都是通过间接方式推断的。

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