javascript - 在 contenteditable 中取消选择后范围文本相同

Question

我在 contenteditable 中有一个“mouseup”事件处理程序，用于检查文本是否已被选中。如果您在键入后突出显示文本，一切都很好，但如果您再次单击(以取消选择文本)，控制台会显示 range.toString() 是相同的，尽管没有选择文本。

http://jsfiddle.net/xpvt214o/857876/

在 contenteditable 中输入一些内容，然后选择它，然后再次单击(取消选择)并检查控制台。两个 console.logs 将相同。

我需要区分真正的选择和取消选择。如果这是正常行为，我如何区分这两个事件，或者我如何以不同的方式来防止这种行为？

Answer 1

事实上，Chrome 确实会在 mouseup 事件之后更改事件选择。

您可以为此事件添加一个 hackish 超时，这可能会中断一些时间...

或者您可以使用选择 API 的 selectionchange事件。

每次选择发生变化时都会触发此事件:

$(document).on('selectionchange', function() {
  console.log(getSelection().toString());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="container">Select this dummy text</div>

额外的好处是它也适用于键盘选择。

要了解此事件是选择还是取消选择，您可以检查选择的内容是否为空，或者当前范围是否折叠:

$(document).on('selectionchange', function() {
  var isUnselect = getSelection().getRangeAt(0).collapsed;
  viewer.style.backgroundColor = isUnselect ? 'red' : 'green';
})

#viewer{
  width: 20px;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewer"></div>
<div contenteditable="true" id="container">Select this dummy text</div>