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

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

问题实际上在于您在文本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

希望能完成所有问题。

Answer 2

问题中提供的小提琴在Edge和IE11中工作正常，但在Chrome中不起作用。我找到了使它在任何地方都可以使用的技巧。除了您已经拥有的click处理程序之外，还添加以下事件处理程序：

$(document).on("selectionchange", function () {
    yourFunction();
});

一些注意事项：

selectionchange是一个文档级事件，您不能将其绑定到特定元素（但是可以确定是否需要在事件处理程序中对其进行处理）
处理selectionchange而不处理click在Edge和IE11中效果不佳

根据MDN，浏览器支持足够好：https://developer.mozilla.org/en-US/docs/Web/API/Document/selectionchange_event

单击选定的文本后，窗口选择不会给出更新的范围

2 个答案: