如何实现选中商品名称弹出调查弹窗？CSS伪类或JS方案可行吗？

关于:active/:focus伪类的可行性 #

• :active伪类仅在元素被点击（鼠标按下未松开）时触发，松开鼠标后立即失效，无法维持弹窗的显示状态，完全不符合「选中商品名称后弹出窗口」的需求——毕竟用户选中文字是松开鼠标后的操作，此时:active早已失效。
• :focus伪类针对可聚焦元素（如input、button，或添加了tabindex的元素），触发条件是元素获得焦点（点击、Tab切换），而非选中文字内容的动作。哪怕给商品名称容器加tabindex，也只能监听元素聚焦，无法捕捉文字被选中的行为，因此这两个伪类都满足不了你的场景。

必须采用JavaScript事件监听器的自定义方案 #

要实现「选中商品名称弹出窗口」的功能，必须依赖JS监听选中文本的事件，常见实现思路有两种：

方案1：给目标元素绑定mouseup事件 #

通过监听商品名称元素的鼠标松开事件，判断用户是否选中了该元素内的文字：

<!-- HTML结构 -->
<span class="product-name">XX品牌透气运动鞋</span>
<div class="satisfaction-modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background: #fff; border-radius: 8px;">
  <p>请问您对这款商品的满意度如何？</p>
  <button>满意</button>
  <button>一般</button>
  <button>不满意</button>
</div>

<script>
// JS逻辑
const productNameEl = document.querySelector('.product-name');
const modalEl = document.querySelector('.satisfaction-modal');

productNameEl.addEventListener('mouseup', () => {
  const selection = window.getSelection();
  const selectedText = selection.toString().trim();
  // 判断选中的文本是否来自当前商品名称元素
  if (selectedText && selection.anchorNode.parentNode === productNameEl) {
    modalEl.style.display = 'block';
  }
});

// 点击弹窗外部关闭窗口
document.addEventListener('click', (e) => {
  if (!modalEl.contains(e.target) && e.target !== productNameEl) {
    modalEl.style.display = 'none';
  }
});
</script>

方案2：全局监听selectionchange事件 #

通过全局监听文本选中状态的变化，判断选中区域是否属于商品名称元素，适合页面存在多个商品名称的场景：

document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  const selectedText = selection.toString().trim();
  if (!selectedText) return;
  
  // 检查选中节点是否属于商品名称元素
  const productNameEl = selection.anchorNode.closest('.product-name');
  if (productNameEl) {
    document.querySelector('.satisfaction-modal').style.display = 'block';
  }
});

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