单击所选文本后，窗口选择不会提供更新的范围 [英] After clicking on selected text, window selection is not giving updated range

问题描述

双击后，可以在onclick事件上正确获取选择范围，但是当我再次单击所选文本时，更新的选择范围应该由窗口选择返回，但这不会发生。任何人都可以告诉我，这是一个在JavaScript选择中的错误，或者他们这样做。

 < div id =xyzcontenteditable = true> Hello world< / div> 
< span class =status>所选文字：< / span> 
  

javascript代码：

  function yourFunction（）{
 if（window.getSelection）{
 var selectionRange = window.getSelection（）; 
 $（'。status'）。text（selectionRange.toString（））; 
} 
} 
 
 $（'＃xyz'）。click（function（）{
 $（'。status'）。 ）; 
 yourFunction（）; 
}）
  

示例此处

解决方案

你捣蛋工作很好。但是，有时候当你快速连续选择，然后它不能注册的点击。

问题真的在于你实现它的方式单击输入本身的。当鼠标悬停在 mousedown 后面时，会产生点击事件。当您 mousedown ，然后拖动，然后 mouseup 时，会发生选择。

如果您分离选择检索，则不会发生此问题。

http://jsfiddle.net/zRr4s/21/

这里，选择检索不是按钮点击，而是输入本身。

即，而不是：

  $（'＃xyz'）。click（function（e）{... 
  

使用：

  $（'＃btn'）。 （function（）{... 
  

其中，btn是：

 < input id =btntype =buttonvalue =get selection/> 
  / pre> 
 
 
希望有帮助。
 
 
 
 更新：
 
 
 
如果你坚持只在输入上处理事件，那么倾听 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空）{// Chrome 
 window.getSelection（）。empty（）; 
} else if（window.getSelection（）。removeAllRanges）{// Firefox 
 window.getSelection（）。removeAllRanges（）; 
} 
} else if（document.selection）{// IE？ 
 document.selection.empty（）; 
} 
} 
  
上述函数的完整代码取自此答案： http://stackoverflow.com/a/3169849/1355315  
 
 
 
希望完成所有问题。
 
After double click, selection range can be obtained correctly on onclick event but when I again click on the selected text then updated selection range should be returned by window selection but this is not happening. Can anybody tell me if this is a bug in javascript selection or they have made it this way. And what could be the solution to get the updated range apart from timer.
<div id="xyz" contenteditable="true">Hello world</div>
<span class="status">Selected text : </span>
javascript code :
function yourFunction() {
    if (window.getSelection) {
         var selectionRange = window.getSelection();
         $('.status').text(selectionRange.toString());
    }
}

$('#xyz').click(function () {
    $('.status').text('Mouse click');
    yourFunction();
})
Example here
解决方案
You fiddle is working just fine. But, yes sometimes when you do selections in quick succession, then it fails to register the click.

The problem really lies in the way you have implemented it on click on the text input itself. A click event is generated when a mouseup follows a mousedown. A selection happens when you mousedown then drag and then mouseup. 

If you separate out the selection retrieval then this problem won't occur.

See this updated fiddle: http://jsfiddle.net/zRr4s/21/

Here, the selection retrieval is donw on a button click, instead of the input itself.

i.e., instead of: 
$('#xyz').click(function (e) { ...
using this:
$('#btn').click(function () { ...
where, btn is:
<input id="btn" type="button" value="get selection" />
Hope that helps.

Update:

If you insist on handling event only on the input, then listening mouseup would be better option:

See this fiddle: http://jsfiddle.net/zRr4s/22/
$('#xyz').on("mouseup", function (e) { ...
Update 2:

To handle your requirement of in-context click, you will have to first clear the selection. For this to happen you will have to handle mousedown. So, that will defeat your purpose of having only one handler. Anyway, 

You updated fiddle: http://jsfiddle.net/zRr4s/29/

And, this is how you do it:
$('#xyz').on("mousedown", function () {
    clearTheSelection();
});
Where clearTheSelection is another function:
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();
    }
}
The complete code for the above function taken from this answer: http://stackoverflow.com/a/3169849/1355315

Hope that completes all your problems.

                        
这篇关于单击所选文本后，窗口选择不会提供更新的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！