javascript - 如何禁止选择div中的某些文本？

Question

假设我有一个带有标记的文本，例如:

而且我想禁用选择，这样选择的开始或结束不在标记中。因此，所有这些选择都应该是可能的:

另一方面，应该禁用这些选择:

到目前为止，我只尝试使用一些简单的 css，

mark {
   -khtml-user-select: all;
   -webkit-user-select: all;
   -o-user-select: all;
   user-select: all;
}

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

jsfiddle link

有什么办法吗？任何答案将不胜感激!

---

我实现了我想做的，所以我在这里分享。

function checkSelection () {
  var sel = window.getSelection();
  var marks = document.getElementsByTagName('mark');
  for(var i = 1; i < sel.rangeCount; i++) {
    sel.removeRange(sel.getRangeAt(i));
  }
  var range = sel.getRangeAt(0);
  var startnode = range.startContainer;
  var endnode = range.endContainer;
  for (var i = 0; i < marks.length; i++) {
  	if (marks[i].contains(startnode)) {
      range.setStartBefore(startnode);
    }
  	if (marks[i].contains(endnode)) {
      range.setEndAfter(endnode);
    }
  }
}

document.addEventListener('mouseup', checkSelection)
document.addEventListener('touchend', checkSelection)

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

jsfiddle link

Answer 1

我认为单独使用 CSS 是不可能的，您很可能需要 JavaScript 来检测用户开始选择哪些元素。

---

我所做的是使用 containsNode Selection API 中的方法(工作草案，可能不适用于所有浏览器，并且可能已弃用)来检测所选范围是否包含整个标记元素或根本不包含。如果选择仅包含标记元素的一部分，它将使用 removeAllRanges 方法清除选择。

function checkSelection () {
  var sel = window.getSelection()
  var marks = document.getElementsByTagName('mark')
  for (var i = 0; i < marks.length; i++) {
    if (sel.containsNode(marks[i], false) !== sel.containsNode(marks[i], true))
      sel.removeAllRanges()  // clear selection
  }
}

document.addEventListener('mouseup', checkSelection)
document.addEventListener('touchend', checkSelection)

mark {
  background: yellow;
}

This is <mark>marked text</mark>. I want to disable selecting only part of <mark>marked text</mark>.

请注意，您需要捕获所需的所有选择方法，无论是通过鼠标事件和触摸事件(我包括的所有事件)、键盘插入符号选择还是编程选择。

---

这可以根据您的喜好进行扩展和调整，但这是我从您的规范中复制您想要的行为的最佳机会。如果选择的边界之一在标记区域的边缘开始或结束，上面的代码片段不会一直正常工作，但代码片段应该展示应该工作的基本概念，只需对边缘进行一些微调例。