是javascript的window.getSelection()函数不可靠吗?

时间:2016-07-07 13:15:14

标签: javascript

我在文章标签中加入了一些文字,它本身就在div标签内。然后我创建了一个应该在释放鼠标时调用的事件。该事件执行一个非常简单的操作 - 它调用 window.getSelection 来查找用户突出显示的文本,并显示警告。

这是我的代码,它在90%的时间内都有效(也可在jsfiddle上使用):

function winsel() {
    var sel = window.getSelection();
    alert(sel);
}
$(document).ready(function() {
    $("#ArticleToHighlightRFS").bind("mouseup", winsel);
})
#scrollDiv {
    word-wrap: break-word;
    width: 600px;
    max-width: 600px;
    min-width: 600px;
    height: 700px;
    max-height: 700px;
    min-height: 700px;
    overflow-y: scroll;
    border: 2px solid red;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
    <div id="scrollDiv">
        <article id="ArticleToHighlightRFS">

While awaiting execution, Bonhoeffer recorded a number of his thoughts in a work we now know as Letters and Papers 
from Prison. One of these essays, entitled On Stupidity, records some of the problems which Bonhoeffer likely saw at work 
in Hitler’s rise to power:


“Upon closer observation, it becomes apparent that every strong upsurge of power in the public sphere, be it of a political 
or a religious nature, infects a large part of humankind with stupidity. … The power of the one needs the stupidity of the other. 
The process at work here is not that particular human capacities, for instance, the intellect, suddenly atrophy or fail. Instead, 
it seems that under the overwhelming impact of rising power, humans are deprived of their inner independence and, more or less consciously, 
give up establishing an autonomous position toward the emerging circumstances. The fact that the stupid person is often stubborn must not 
blind us to the fact that he is not independent. In conversation with him, one virtually feels that one is dealing not at all with him as a 
person, but with slogans, catchwords, and the like that have taken possession of him. He is under a spell, blinded, misused, and abused 
in his very being. Having thus become a mindless tool, the stupid person will also be capable of any evil and at the same time incapable of seeing that it is evil. This is where the danger of diabolical misuse lurks, for it is this that can once and for all destroy human beings.”

        </article>
    </div>
</center>

几次不起作用是问题的原因。如果您转到jsfiddle页面并运行代码,您将看到一个包含文本的框。第一个词是“while”。我强调一下,在'e'之后的白色空间开始并向后选择一直到框的边界。当我很幸运时,警告框中会弹出单词WHILE。当我运气不好时,根本没有任何事情发生。我尝试使用JavaScript控制台查看是否报告了任何错误,但未报告任何错误 如果您想复制问题,请执行以下操作:

  1. 突出显示“while”并等待警报。

  2. 突出显示其他单词,最好在一行中间等待警告。

  3. 再次突出显示“while”。 希望这样做几次会告诉你问题 - 'while'的警报不会出现。

  4. (我在Windows 10上使用Chrome)。

1 个答案:

答案 0 :(得分:0)

答案可能是否定的,至少在你的帖子中是这样。一些JS方法在多个浏览器/设备/版本中是不可靠的(对不同的实现细节做),很少是在同一浏览器/设备/版本中不可靠的方法。

话虽如此,问题可能出现在代码的其他方面,在这种情况下可以很容易地证明这一点 - alert方法没有问题&#34; falsy&#34;无论window.getSelection的输出是否有效,都会弹出值。唯一的方法是,如果window.getSelection调用产生致命错误,我们已经证实它没有。最后,根据您的描述,问题的核心是&#34; 警告&#39;而#39;不会出现&#34;这说得好。

因为我没有能够重现你的问题并成为那个&#34;而#34;你的测试中使用的单词在#ArticleToHighlightRFS div的边界附近是可疑的,我倾向于同意上面的评论并且理论上有时&#34;有时&#34;您正在#ArticleToHighlightRFS div之外释放鼠标,因此不会触发#ArticleToHighlightRFS mouseup事件,因此不会触发其回调,因此不会触发alert调用。

假设是这种情况,您可以通过收听body事件的mouseup元素来解决问题,但只有在mousedown事件发生时才对其执行操作在所需的#ArticleToHighlightRFS div之前。实施将类似于:

&#13;
&#13;
$(document).ready(function() {
  var $body = $('body')
  var $articleToHighlightRFS = $('#ArticleToHighlightRFS')
  var winsel = function () {
      $body.off('mouseup', winsel);
      var sel = window.getSelection();
      alert(sel);
  }
  $articleToHighlightRFS.on('mouseup', winsel);
  $articleToHighlightRFS.on('mousedown', function () {
    $body.one('mouseup', winsel);
  });
})
&#13;
body { padding: 30px; background: blue }
#scrollDiv {
    background: white;
    word-wrap: break-word;
    width: 600px;
    max-width: 600px;
    min-width: 600px;
    height: 700px;
    max-height: 700px;
    min-height: 700px;
    overflow-y: scroll;
    border: 2px solid red;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
body element is all the blue
</br>
</br>
<center>
    <div id="scrollDiv">
        <article id="ArticleToHighlightRFS">

While awaiting execution, Bonhoeffer recorded a number of his thoughts in a work we now know as Letters and Papers 
from Prison. One of these essays, entitled On Stupidity, records some of the problems which Bonhoeffer likely saw at work 
in Hitler’s rise to power:


“Upon closer observation, it becomes apparent that every strong upsurge of power in the public sphere, be it of a political 
or a religious nature, infects a large part of humankind with stupidity. … The power of the one needs the stupidity of the other. 
The process at work here is not that particular human capacities, for instance, the intellect, suddenly atrophy or fail. Instead, 
it seems that under the overwhelming impact of rising power, humans are deprived of their inner independence and, more or less consciously, 
give up establishing an autonomous position toward the emerging circumstances. The fact that the stupid person is often stubborn must not 
blind us to the fact that he is not independent. In conversation with him, one virtually feels that one is dealing not at all with him as a 
person, but with slogans, catchwords, and the like that have taken possession of him. He is under a spell, blinded, misused, and abused 
in his very being. Having thus become a mindless tool, the stupid person will also be capable of any evil and at the same time incapable of seeing that it is evil. This is where the danger of diabolical misuse lurks, for it is this that can once and for all destroy human beings.”

        </article>
    </div>
</center>
&#13;
&#13;
&#13;

我希望有所帮助!