如何在contenteditable div中实现无mouseup触发选中文本的函数，且支持键鼠选中触发？

当然可以！完全不需要绑定mouseup事件就能响应文本选中操作，而且还能同时覆盖鼠标和键盘触发的选中场景——刚好匹配你对contenteditable div的需求。

核心方案：使用selectionchange原生事件 #

浏览器提供的selectionchange事件是专门用来监听页面文本选区变化的，它的优势非常明显：

• 不依赖任何鼠标/键盘的单个事件（比如mouseup、keydown），只要选区发生变化就会触发；
• 支持所有选中方式：鼠标拖选、双击/三击选中、Shift+方向键逐字/逐行选中、Ctrl+A全选，甚至通过浏览器菜单触发的选中操作；
• 兼容所有现代浏览器，包括Chrome、Firefox、Edge等。

针对contenteditable div的具体实现 #

因为selectionchange是全局事件（整个页面的选区变化都会触发），所以我们需要额外判断选区是否位于目标的contenteditable div内，避免误触发。以下是完整的代码示例：

HTML结构

<div id="editableDiv" contenteditable="true" style="padding: 10px; border: 1px solid #ccc;">
  在这里选中文本试试——不管用鼠标拖选，还是用Shift+方向键选中，都会触发响应函数~
</div>

JavaScript逻辑

// 获取目标可编辑div
const editableDiv = document.getElementById('editableDiv');

// 监听全局选区变化事件
document.addEventListener('selectionchange', () => {
  // 获取当前页面的选区对象
  const selection = window.getSelection();
  
  // 检查选区是否有效，并且选区的内容属于目标div
  if (selection.rangeCount > 0) {
    const selectedRange = selection.getRangeAt(0);
    // 判断选区的公共祖先节点是否在目标div内
    if (editableDiv.contains(selectedRange.commonAncestorContainer)) {
      // 执行你自定义的响应函数，这里把选中的文本传进去
      handleTextSelection(selection.toString());
    }
  }
});

// 自定义的选中响应函数，你可以在这里写业务逻辑
function handleTextSelection(selectedText) {
  if (selectedText.trim()) { // 避免空选区触发
    console.log('你选中的文本是：', selectedText);
    // 示例：可以在这里实现高亮选中内容、弹出提示、统计字数等功能
  }
}

额外细节说明 #

• 如果需要区分“选中开始”和“选中结束”，可以结合mousedown或keydown记录初始状态，但大部分场景下selectionchange已经足够满足需求；
• 若页面存在多个可编辑元素，只需在判断逻辑里精准锁定目标元素即可，不会互相干扰；
• 当用户取消选中（比如点击空白处），selection.toString()会返回空字符串，你可以在响应函数里加判断过滤这种情况。

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