Python Selenium：双击后选择Drept/Restrictie选项的实现求助

步骤1：构建HTML结构 #

先定义可编辑的表格单元格，以及用于显示选项的隐藏菜单：

<table>
  <tr>
    <td class="editable-cell">双击我修改</td>
  </tr>
</table>

<!-- 选项菜单，初始隐藏 -->
<div id="options-menu" style="display: none; position: absolute; border: 1px solid #ddd; background: #fff; padding: 8px; z-index: 1000; cursor: pointer;">
  <div class="option-item">drept</div>
  <div class="option-item">restrictie</div>
</div>

步骤2：编写JavaScript逻辑 #

处理双击显示菜单、点击选项更新单元格、点击外部关闭菜单的逻辑：

let activeCell = null;
const optionsMenu = document.getElementById('options-menu');
const optionItems = optionsMenu.querySelectorAll('.option-item');

// 双击单元格显示菜单
document.querySelector('table').addEventListener('dblclick', (e) => {
  const cell = e.target.closest('.editable-cell');
  if (!cell) return;

  activeCell = cell;
  // 定位菜单到单元格下方
  const cellRect = cell.getBoundingClientRect();
  optionsMenu.style.left = `${cellRect.left}px`;
  optionsMenu.style.top = `${cellRect.bottom + window.scrollY}px`;
  optionsMenu.style.display = 'block';
});

// 点击选项更新单元格内容
optionItems.forEach(item => {
  item.addEventListener('click', () => {
    if (!activeCell) return;
    // 根据选项文本转换为目标内容
    const newValue = item.textContent === 'drept' ? 'Drept' : 'Restrictie';
    activeCell.textContent = newValue;
    optionsMenu.style.display = 'none';
    activeCell = null;
  });
});

// 点击页面其他区域关闭菜单
document.addEventListener('click', (e) => {
  if (!e.target.closest('.editable-cell') && !e.target.closest('#options-menu')) {
    optionsMenu.style.display = 'none';
    activeCell = null;
  }
});

步骤3：排查双击不生效的常见问题 #

如果双击仍无反应，检查以下几点：

• 目标单元格是否被其他元素覆盖：可通过浏览器开发者工具查看元素层级，调整z-index确保单元格可被点击
• 是否存在阻止事件传播的代码：检查页面中其他事件处理函数，避免event.stopPropagation()或event.preventDefault()阻断双击事件
• 单元格样式是否禁用了用户选择：如果设置了user-select: none，可能影响双击识别，添加.editable-cell { user-select: auto; }修复

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