哈哈，这个问题我碰到过好多次了——浏览器对禁用（disabled）状态的表单元素有个硬性规则：这类元素不会触发任何鼠标相关事件，包括你绑定的oncontextmenu右键菜单事件。这是浏览器的交互规范设计，就是要让用户明确感知到该元素处于不可交互状态，所以连事件监听都直接跳过了。

对应到你的代码里：当<select>加上disabled="true"时，浏览器直接忽略了它身上的oncontextmenu="hello()"绑定，右键点击自然不会触发函数；移除disabled后，元素恢复可交互，事件就正常触发了。

下面给你两个可行的解决方案，根据你的实际需求选就行：

方案1：模拟禁用状态，保留事件触发能力 #

既然原生disabled会拦截事件，那我们可以用样式和逻辑模拟禁用效果，同时保留事件：

/* 模拟禁用的视觉样式 */
.select-disabled {
    background-color: #eeeeee;
    color: #999999;
    cursor: not-allowed;
}

<select id="testSelect" oncontextmenu="hello()" class="select-disabled">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

function hello() { 
    alert('clicked'); 
    window.event.returnValue = false; 
    // 如果需要阻止用户修改选项，可以添加这行
    document.getElementById('testSelect').selectedIndex = 0;
}

// 如果是表单提交场景，需要临时禁用该字段避免提交值
document.querySelector('form')?.addEventListener('submit', function() {
    document.getElementById('testSelect').disabled = true;
});

这种方案的好处是完全保留了元素的事件能力，视觉上也和原生禁用一致，只是需要额外处理一些交互限制（比如阻止选项选择）。

方案2：给禁用元素套个容器，在容器上绑定事件 #

因为禁用元素本身不触发事件，但它的父容器可以。我们用一个容器把<select>包起来，在容器上绑定右键菜单事件：

<!-- 用div包裹select，确保容器尺寸和select一致 -->
<div oncontextmenu="hello()" style="display: inline-block; width: 100px;">
    <select id="testSelect" disabled="true">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</div>

function hello() { 
    alert('clicked'); 
    window.event.returnValue = false; 
}

这个方案更简单，适合只需要触发右键事件、不需要用户和select交互的场景。注意要调整容器的样式，让它和select的尺寸完全匹配，避免右键点击到容器空白区域也触发事件。

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