如何仅对指定#chapter元素调用getSelection而非全局window/document？

问题1：仅获取#chapter区域内的选中文本，解决getSelection报错 #

getSelection是window对象的原生方法，DOM元素本身不具备该方法，所以你直接将window.getSelection替换为chapter.getSelection必然会触发空值报错。正确的实现逻辑是先拿到全局选中内容，再判断选中范围是否落在#chapter节点内部：

function getChapterSelectedText() {
  const selection = window.getSelection();
  // 无选中内容直接返回空
  if (!selection.rangeCount) return '';
  const range = selection.getRangeAt(0);
  const chapterEl = document.querySelector('#chapter');
  // 判断选中范围是否包含在#chapter元素内
  if (chapterEl && chapterEl.contains(range.commonAncestorContainer)) {
    return selection.toString().trim();
  }
  return '';
}

问题2：文本插入后终止选中检测逻辑 #

你出现插入后内容被覆盖的问题，核心原因是选中状态监听事件（比如selectionchange、点击事件）没有在插入完成后正确移除。注意移除事件监听器时，传入的回调函数必须和绑定时是同一个引用，不能用匿名函数，否则移除不会生效：

// 先将监听逻辑定义为具名函数，方便后续移除
function handleSelectionUpdate() {
  const selectedText = getChapterSelectedText();
  if (selectedText) {
    // 替换为你自己的ACF字段赋值逻辑
    document.querySelector('.acf-textarea-field').value = selectedText;
    // 赋值完成后直接移除监听器，终止检测
    document.removeEventListener('selectionchange', handleSelectionUpdate);
  }
}

// 模态框打开时才绑定监听事件，不要全局绑定
document.querySelector('#open-modal-btn').addEventListener('click', () => {
  // 绑定前先移除一次，避免重复绑定
  document.removeEventListener('selectionchange', handleSelectionUpdate);
  document.addEventListener('selectionchange', handleSelectionUpdate);
})

// 模态框关闭时也要移除监听器，避免残留
document.querySelector('#close-modal-btn').addEventListener('click', () => {
  document.removeEventListener('selectionchange', handleSelectionUpdate);
})

注意事项 #

• 如果你的事件是绑定在其他节点上，按照上述逻辑替换绑定/移除的目标节点即可
• 若使用jQuery等类库绑定事件，要对应使用类库提供的off方法移除，不要混用原生和类库的事件监听方法

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