单击所选文本后，窗口选择未提供更新范围

Question

双击后，可以在 onclick 事件上正确获取选择范围，但是当我再次单击所选文本时，窗口选择应返回更新的选择范围，但这并没有发生。任何人都可以告诉我这是 javascript 选择中的错误还是他们已经这样做了。除了计时器之外，获得更新范围的解决方案是什么。

<div id="xyz" contenteditable="true">Hello world</div>
<span class="status">Selected text : </span>

javascript代码：

function yourFunction() {
    if (window.getSelection) {
         var selectionRange = window.getSelection();
         $('.status').text(selectionRange.toString());
    }
}

$('#xyz').click(function () {
    $('.status').text('Mouse click');
    yourFunction();
})

示例在这里

Answer 1

你的小提琴工作得很好。但是，是的，有时当您快速连续进行选择时，它无法注册点击。

问题实际上在于您click在文本input本身上实现它的方式。当mouseup跟随mousedown时，会生成单击事件。当您按下 mousedown然后拖动然后mouseup时会发生选择。

如果将选择检索分开，则不会出现此问题。

请参阅此更新的小提琴：http://jsfiddle.net/zRr4s/21/

在这里，选择检索是通过单击按钮而不是输入本身进行的。

即，而不是：

$('#xyz').click(function (e) { ...

使用这个：

$('#btn').click(function () { ...

其中，btn 是：

<input id="btn" type="button" value="get selection" />

希望有帮助。

更新：

如果您坚持仅在输入上处理事件，那么监听mouseup将是更好的选择：

看到这个小提琴：http://jsfiddle.net/zRr4s/22/

$('#xyz').on("mouseup", function (e) { ...

更新2：

要满足上下文点击的要求，您必须首先清除选择。为此，您必须处理mousedown。因此，这将违背您只拥有一个处理程序的目的。反正，

您更新了小提琴：http://jsfiddle.net/zRr4s/29/

而且，这就是你如何做到的：

$('#xyz').on("mousedown", function () {
    clearTheSelection();
});

clearTheSelection另一个函数在哪里：

function clearTheSelection() {
    if (window.getSelection) {
      if (window.getSelection().empty) {  // Chrome
        window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {  // Firefox
        window.getSelection().removeAllRanges();
      }
    } else if (document.selection) {  // IE?
      document.selection.empty();
    }
}

上述函数的完整代码取自此答案：https ://stackoverflow.com/a/3169849/1355315

希望能解决您所有的问题。