如果单击先前活动的选择，如何知道用户何时取消选择文本？

Question

我正在开发一个小型文本编辑功能，我需要知道用户何时选择/取消选择文本，以便相应地显示可用选项。例如：选择文本时，可以创建链接、加粗等。如果没有选择文本，则根本不显示这些选项。

我在mouseup 和keyupevents 上使用window.getSelection()，然后检查isCollapsed 属性的值以查看是否存在活动选择。它有效，但并非在所有情况下都有效。以下是使用此 JSFiddle 重现的一些步骤：http://jsfiddle.net/0qqbaqo4/

这行得通

1. 选择一些文本。
2. 通过单击当前选择外部文本中的任何其他位置取消选择它。
3. 结果应该是“有一个活动选择：false”。

这不起作用

1. 选择一些文本。
2. 通过单击内当前选择的任意位置取消选择它。
3. 结果应该是“有一个活动的选择：假”，但它实际上仍然是真的。

这发生在我在 Mac OS 上的 Chrome 36 和 Firefox 31 中。我还没有在其他浏览器中测试过。

我想也许在mouseup 上，文本选择仍然处于活动状态，我应该等待其他一些事件触发，但我什么也没找到。

任何帮助都会很棒，谢谢:)

Answer 1

我终于解决了这个问题，确保使用removeAllRanges() 函数删除了mousedown 上的任何选择。此处的工作示例：http://jsfiddle.net/0qqbaqo4/。

Answer 2

问题是事件没有在正确的时间触发。因此，当您测试选择状态时，还不能确定取消选择事件。

管理此问题的一种简单方法是使用 setTimeout(fn,delay) 进行延迟函数调用。一种标准方法是将函数延迟 0ms，这基本上意味着“在所有当前执行的函数都完成之后”：

$('.editable').on('mouseup keyup', function(e){
   var selection = window.getSelection();

   setTimeout(function() {
       $('#result').text('There is an active selection : ' +           
                         !selection.isCollapsed);
   }, 0);
});

可能有一个由 jQuery 触发的事件，总是在解决后触发，但我发现延迟响应通常在没有那么多阅读的情况下效果更好。 ;-)

看这里：

http://jsfiddle.net/0qqbaqo4/2/