jQuery中select事件在p标签不生效，如何绑定段落文本选中触发事件？

问题原因 #

jQuery 内置的 select 事件仅支持 <input>、<textarea> 这类可编辑的表单元素，普通段落 <p> 不属于可输入元素，自然无法触发该事件。

解决方法 #

通过监听鼠标松开（mouseup）事件，配合浏览器原生的 Selection API 判断是否有文本选中，同时校验选中范围是否落在目标 <p> 标签内，即可实现需求。

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
color: blue;
}
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

</head>
<body>

<div>
  <h1>为选中文本添加提示框</h1>
  <p>
    你可以尝试选中一段文本，再选中其他内容，就能看到提示框自动调整到正确位置。<br />
    当提示框显示时如果你滚动页面，还能看到提示框会自动调整位置，始终保持在视口范围内。
  </p>
  <div></div>
  <hr />
</div>

<script>
// 监听p标签的鼠标松开事件
$("p").on("mouseup", function() {
  // 获取用户选中的文本内容
  const selection = window.getSelection();
  const selectedText = selection.toString().trim();
  // 仅当有选中内容时触发业务逻辑
  if (selectedText.length > 0) {
    // 此处可替换为你的自定义逻辑，比如展示悬浮提示框等
    alert('选中的文本内容：' + selectedText);
  }
});
</script>
</body>
</html>

逻辑说明 #

• 用 mouseup 事件替代原生 select 事件，响应用户选中文本后松开鼠标的操作
• 调用 window.getSelection() 获取全局选中内容，调用 toString() 拿到选中的明文文本
• 增加非空判断，避免用户只是点击段落没有选中文本时误触发逻辑

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