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

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

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

问题实际上在于您在文本input本身的click上实现它的方式。当mouseup跟随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：

要处理上下文中单击的要求，您必须首先清除选择。要做到这一点，您必须处理鼠标向下。所以，这将违背你只有一个处理者的目的。不管怎样，

你更新了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

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

Answer 2

问题中提供的fiddle在Edge和IE11中运行良好，但在Chrome中不起作用。我找到了一个让它在任何地方都有效的窍门。除了已有的click处理程序外，还添加以下事件处理程序：

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

一些注意事项：

1. selectionchange是一个文档级事件，您无法将其绑定到特定元素(但您可以在事件处理程序中找到是否需要处理它)

2. 在不同时处理click的情况下处理selectionchange在Edge和IE11 中效果不佳

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