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

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();
})

示例 here

Answer 1

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

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

如果将选择检索分离出来，就不会出现这个问题。

查看更新后的 fiddle :http://jsfiddle.net/zRr4s/21/

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

即，代替:

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

使用这个:

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

其中，btn 是:

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

希望对您有所帮助。

更新:

如果你坚持只在输入上处理事件，那么监听 mouseup 会是更好的选择:

请参阅此 fiddle :http://jsfiddle.net/zRr4s/22/

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

更新 2:

要处理上下文中点击的要求，您必须先清除选择。为此，您必须处理 mousedown。因此，这将破坏您只有一个处理程序的目的。总之，

您更新了 fiddle : 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

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