我有这段代码，如果对某些文字做出选择并且它不仅是一个空格，则会出现div。但是，如果我在div上什么都不做，那么选择就被删除了。 div仍在那里。 是否有一些要检查选择是否为空，然后隐藏div？
$("#actual_verse").mouseup(function() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
if (/\S/.test(text)) {
// Tool Tip
var ele = document.getElementById('tooltip');
var sel = window.getSelection();
var rel1 = document.createRange();
rel1.selectNode(document.getElementById('cal1'));
var rel2 = document.createRange();
rel2.selectNode(document.getElementById('cal2'));
if (!sel.isCollapsed) {
var r = sel.getRangeAt(0).getBoundingClientRect();
var rb1 = rel1.getBoundingClientRect();
var rb2 = rel2.getBoundingClientRect();
//this will place ele below the selection
ele.style.top = (r.bottom - rb2.top) * 100 / (rb1.top - rb2.top) + 'px';
//this will align the right edges together
ele.style.left = (r.left - rb2.left) * 100 / (rb1.left - rb2.left) + 'px';
//code to set content
ele.style.display = 'block';
}
// End of Tool Tip
}
});/* Tool Kit */
#tooltip {
position:absolute;
display: none;
border:grey solid 1px;
background: #373737;
padding: 5px;
border-radius: 3px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
#cal1{
position:absolute;
height:0px;
width:0px;
top:100px;
left:100px;
overflow:none;
z-index:-100;
}
#cal2{
position:absolute;
height:0px;
width:0px;
top:0;
left:0;
overflow:none;
z-index:-100;
}
.boxes {
width: 15px;
height: 15px;
cursor: pointer;
display: inline-block;
margin-right: 2px;
position: relative;
top: 3px;
}
#blue_box {
background: #AAF6FF;
}
#green_box {
background: #D6FFAA;
}
#orange_box {
background: #FFBF98;
}
#purple_box {
background: #D7D5FC;
}
#red_box {
background: #FF9B9F;
}
#yellow_box {
background: #FFF8AA;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'>Lorem ipsum dolor sit amet, doctus expetendis no vel. At vis doming viderer prompta. Ut vis consul atomorum pericula, an sed sonet suscipit lobortis. Eos tale atqui iriure ne, eos in delenit corpora, nec laudem everti ei.</span>
<div id='cal1'> </div>
<div id='cal2'> </div>
<div id='tooltip'>
<div id='blue_box' class='boxes' title='blue_mark'></div>
<div id='green_box' class='boxes' title='green_mark'></div>
<div id='yellow_box' class='boxes' title='yellow_mark'></div>
<div id='orange_box' class='boxes' title='orange_mark'></div>
<div id='purple_box' class='boxes' title='purple_mark'></div>
<div id='red_box' class='boxes' title='red_mark'></div>
</div>
答案 0 :(得分：0)
尝试以下方法：
function selectionHandler() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
if (/\S/.test(text)) {
// Tool Tip
var ele = document.getElementById('tooltip');
var sel = window.getSelection();
var rel1 = document.createRange();
rel1.selectNode(document.getElementById('cal1'));
var rel2 = document.createRange();
rel2.selectNode(document.getElementById('cal2'));
if (!sel.isCollapsed) {
var r = sel.getRangeAt(0).getBoundingClientRect();
var rb1 = rel1.getBoundingClientRect();
var rb2 = rel2.getBoundingClientRect();
//this will place ele below the selection
ele.style.top = (r.bottom - rb2.top) * 100 / (rb1.top - rb2.top) + 'px';
//this will align the right edges together
ele.style.left = (r.left - rb2.left) * 100 / (rb1.left - rb2.left) + 'px';
//code to set content
ele.style.display = 'block';
}
// End of Tool Tip
}
else {
var ele = document.getElementById('tooltip');
ele.style.display = 'none';
}
}
$("#actual_verse").click(selectionHandler);
$("#actual_verse").keypress(selectionHandler);
$("body").click(selectionHandler);/* Tool Kit */
#tooltip {
position:absolute;
display: none;
border:grey solid 1px;
background: #373737;
padding: 5px;
border-radius: 3px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
#cal1{
position:absolute;
height:0px;
width:0px;
top:100px;
left:100px;
overflow:none;
z-index:-100;
}
#cal2{
position:absolute;
height:0px;
width:0px;
top:0;
left:0;
overflow:none;
z-index:-100;
}
.boxes {
width: 15px;
height: 15px;
cursor: pointer;
display: inline-block;
margin-right: 2px;
position: relative;
top: 3px;
}
#blue_box {
background: #AAF6FF;
}
#green_box {
background: #D6FFAA;
}
#orange_box {
background: #FFBF98;
}
#purple_box {
background: #D7D5FC;
}
#red_box {
background: #FF9B9F;
}
#yellow_box {
background: #FFF8AA;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'>Lorem ipsum dolor sit amet, doctus expetendis no vel. At vis doming viderer prompta. Ut vis consul atomorum pericula, an sed sonet suscipit lobortis. Eos tale atqui iriure ne, eos in delenit corpora, nec laudem everti ei.</span>
<div id='cal1'> </div>
<div id='cal2'> </div>
<div id='tooltip'>
<div id='blue_box' class='boxes' title='blue_mark'></div>
<div id='green_box' class='boxes' title='green_mark'></div>
<div id='yellow_box' class='boxes' title='yellow_mark'></div>
<div id='orange_box' class='boxes' title='orange_mark'></div>
<div id='purple_box' class='boxes' title='purple_mark'></div>
<div id='red_box' class='boxes' title='red_mark'></div>
</div>