切换Input Cell时单点击Popup无法正常打开问题求助

问题现象 #

• 点击第一个输入单元格的图标，弹窗可正常打开/关闭
• 关闭第一个弹窗后，点击其他输入单元格的图标，橙色标记会显示，但弹窗需要点击第二次才能打开，所有单元格均存在此问题
• 点击弹窗外部关闭的功能正常

组件代码 #

<tr v-for="(row, index) in table" :key="index">
  <td class="dot_td">
    <img :src="row.cell1.imgSrc" />
  </td>
  <th v-html="row.cell2.content">
  </th>
  <td v-for="inputCell in row.inputCells" :key="inputCell.input" :class="inputCell.rectification === 1 ? 'border_td' : ''">
    <input v-bind="inputCell.input" :value="inputCell.inputData">
    <a style="cursor: pointer;" class="request_icon" @click="openPopup($event, inputCell)">
      <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.5 6.5C13.5 9.77946 10.6254 12.5 7 12.5C3.37461 12.5 0.5 9.77946 0.5 6.5C0.5 3.22054 3.37461 0.5 7 0.5C10.6254 0.5 13.5 3.22054 13.5 6.5Z"
        stroke="#CDCDCD" />
        <path d="M6.46866 10V4.54545H7.53045V10H6.46866ZM7.00488 3.70384C6.82022 3.70384 6.66161 3.64228 6.52903 3.51918C6.39882 3.3937 6.33372 3.24455 6.33372 3.07173C6.33372 2.89654 6.39882 2.7474 6.52903 2.62429C6.66161 2.49882 6.82022 2.43608 7.00488 2.43608C7.18954 2.43608 7.34698 2.49882 7.47718 2.62429C7.60976 2.7474 7.67605 2.89654 7.67605 3.07173C7.67605 3.24455 7.60976 3.3937 7.47718 3.51918C7.34698 3.64228 7.18954 3.70384 7.00488 3.70384Z"
        fill="#CDCDCD" />
      </svg>
    </a>
  </td>
  <td>
    {{ row.totalCell.text }}
  </td>
</tr>

原脚本代码 #

<script setup>
const openPopup = (event, inputCell) => {
    const iconbtn = event.currentTarget;
    const popup = document.getElementById('request_popup');
    
    userComment.value = inputCell.commentData;
    UsercommentDate.value = inputCell.UsercommentDate;
    currentInputCell.value = inputCell;
    managerComment.value = inputCell.Managercomment;
    isPopupVisible.value = !isPopupVisible.value;
    const rect = iconbtn.getBoundingClientRect();

    if (isPopupVisible.value) {
        iconbtn.classList.add('requested');
        popupStyle.top = rect.bottom + window.scrollY + 'px';
        popupStyle.left = rect.left + window.scrollX + 'px';

        // Add an event listener to close the popup on outside click
        const closePopupOnOutsideClick = (event) => {
            const isClickInsidePopup = iconbtn.contains(event.target) || popup.contains(event.target);
            if (!isClickInsidePopup) {
                closePopup(iconbtn);
                document.removeEventListener('click', closePopupOnOutsideClick);
            }
        };

        document.addEventListener('click', closePopupOnOutsideClick);
        
    }else{
        isPopupVisible.value = false;
        iconbtn.classList.remove('requested');
    }
    
};

const closePopup = (iconbtn) => {
    isPopupVisible.value = false;
    if(iconbtn){
    iconbtn.classList.remove('requested');
    }
};
<script>

问题原因 #

1. 全局点击事件未彻底移除：切换新单元格时，旧的全局点击事件仍存在，导致新点击被拦截
2. 状态逻辑冲突：点击新单元格时，isPopupVisible可能仍为false，第一次点击触发状态切换后，旧全局事件会立刻关闭弹窗，造成“需要点击两次”的假象

修复后的脚本代码 #

<script setup>
// 保存当前全局点击事件引用，用于后续移除
let currentOutsideClickHandler = null;

const openPopup = (event, inputCell) => {
    const iconbtn = event.currentTarget;
    const popup = document.getElementById('request_popup');
    
    // 若当前有其他弹窗打开，先关闭
    if (isPopupVisible.value && currentInputCell.value !== inputCell) {
        closePopup(currentInputCell.value.iconBtn);
    }

    // 更新单元格数据
    userComment.value = inputCell.commentData;
    UsercommentDate.value = inputCell.UsercommentDate;
    currentInputCell.value = inputCell;
    managerComment.value = inputCell.Managercomment;
    // 保存当前按钮引用，方便关闭逻辑调用
    inputCell.iconBtn = iconbtn;

    // 切换弹窗状态
    isPopupVisible.value = !isPopupVisible.value;
    const rect = iconbtn.getBoundingClientRect();

    if (isPopupVisible.value) {
        iconbtn.classList.add('requested');
        popupStyle.top = rect.bottom + window.scrollY + 'px';
        popupStyle.left = rect.left + window.scrollX + 'px';

        // 先移除旧的全局事件，避免事件叠加
        if (currentOutsideClickHandler) {
            document.removeEventListener('click', currentOutsideClickHandler);
        }

        // 绑定新的全局点击事件
        currentOutsideClickHandler = (event) => {
            const isClickInsidePopup = iconbtn.contains(event.target) || popup.contains(event.target);
            if (!isClickInsidePopup) {
                closePopup(iconbtn);
                document.removeEventListener('click', currentOutsideClickHandler);
                currentOutsideClickHandler = null;
            }
        };

        document.addEventListener('click', currentOutsideClickHandler);
        
    }else{
        isPopupVisible.value = false;
        iconbtn.classList.remove('requested');
        // 移除全局事件
        if (currentOutsideClickHandler) {
            document.removeEventListener('click', currentOutsideClickHandler);
            currentOutsideClickHandler = null;
        }
    }
    
};

const closePopup = (iconbtn) => {
    isPopupVisible.value = false;
    if(iconbtn){
        iconbtn.classList.remove('requested');
    }
    // 统一移除全局事件，确保状态干净
    if (currentOutsideClickHandler) {
        document.removeEventListener('click', currentOutsideClickHandler);
        currentOutsideClickHandler = null;
    }
};
<script>

修复说明 #

1. 新增currentOutsideClickHandler变量管理全局点击事件，每次打开新弹窗前移除旧事件，避免事件叠加干扰
2. 点击新单元格时，先检测并关闭已打开的其他弹窗，避免状态冲突
3. 在关闭弹窗的逻辑中统一清理全局事件，确保状态重置彻底
4. 给inputCell添加iconBtn属性保存当前按钮引用，方便跨逻辑调用

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