在 Chrome/Edge 中，对 元素双击时 selectedIndex 常返回 -1，原因是双击触发了“选中→取消选中”的快速切换；Firefox 行为不同故表现正常。正确做法是通过 event.target 获取被点击的 元素，并读取其 value 或计算其 index。
在 chrome/edge 中，对 `
在 Web 开发中，使用 <select multiple></select> 实现双击操作（如左右穿梭列表）是常见需求。但开发者常遇到一个跨浏览器兼容性问题：在 Chrome 和 Edge 中，直接访问 select.selectedIndex 在 ondblclick 事件中几乎总是返回 -1，而 Firefox 却能正确返回索引值。
根本原因在于浏览器对 multiple 模式下双击行为的实现差异：
- 第一次点击（单击）会选中目标
<option></option>； - 第二次点击（构成双击）会立即取消该选项的选中状态；
- 此时
ondblclick事件才被触发，而selectedIndex已变为-1（无选中项）； - 因此，依赖
selectedIndex的逻辑在 Chrome/Edge 下失效。
✅ 正确解法是绕过 selectedIndex，直接捕获被双击的 DOM 元素：
利用 event.target —— 它在 ondblclick 触发时始终指向用户实际点击的 <option></option> 节点，不受选中状态变化影响。
以下是推荐的修复代码（含增强版示例，支持获取真实 DOM 索引与 value）：
<select id="jobs" multiple size="15" style="width: 150px; height: 280px" ondblclick="move(event, 'jobright');">
<option value="1">Day 1 - Sunday</option>
<option value="2">Day 2 - Monday</option>
<option value="3">Day 3 - Tuesday</option>
<option value="4">Day 4 - Wednesday</option>
<option value="5">Day 5 - Thursday</option>
<option value="6">Day 6 - Friday</option>
<option value="7">Day 7 - Saturday</option>
</select>
<script>
function move(event, direction) {
const target = event.target;
// ✅ 安全获取被双击选项的 value（推荐用于业务逻辑）
const value = target.value;
// ✅ 如需获取该 option 在 select 中的序号索引（从 0 开始）
const index = Array.from(target.parentNode.options).indexOf(target);
console.log(`Double-clicked option: value="${value}", index=${index}`);
alert(`Value: ${value}, Index: ${index}`);
}
</script>? 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要再依赖
select.selectedIndex处理双击场景，尤其在multiple模式下； -
event.target是<option></option>元素本身，可安全访问.value、.text、.index（注意：.index是只读属性，但仅在<option></option>作为select子元素时有效，推荐用Array.from(...).indexOf()更健壮）； - 若需兼容旧版 IE（已不推荐），可补充
event.srcElement回退逻辑，但现代项目可忽略； - 为提升可维护性，建议将内联
ondblclick移至 JS 中通过addEventListener绑定（分离关注点，更易测试）：
document.getElementById('jobs').addEventListener('dblclick', (e) => {
if (e.target.tagName === 'OPTION') {
move(e, 'jobright');
}
});该方案彻底规避了浏览器选中状态竞争问题，确保双击行为稳定、可预测，是处理 <select multiple></select> 双击交互的标准实践。
