我有这个文字。在选择时,将出现具有多种颜色的div。单击蓝色div或第一个颜色div时,文本应突出显示当前突出显示的文本。这仅在我删除#blue_box
的条件if语句时才有效。我认为click元素在程序检索文本之前删除了文本的选择。如何保持点击元素,还可以跟踪选择?
$("#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)) {
$("#blue_box").click(function() {
var range = document.getSelection().getRangeAt(0);
var contents = range.extractContents();
var node = document.createElement('span');
node.style.backgroundColor = "yellow";
node.appendChild(contents);
range.insertNode(node);
});
// 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'));
window.addEventListener('mouseup', function() {
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;
}
#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;
}
.highlight {
background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'> Hello There! </span>
<div id='cal1'> </div>
<div id='cal2'> </div>
<div id='tooltip'>
<div id='blue_box' class='boxes' title='Blue'></div>
<div id='green_box' class='boxes' title='Green'></div>
<div id='orange_box' class='boxes' title='Orange'></div>
<div id='purple_box' class='boxes' title='Purple'></div>
<div id='red_box' class='boxes' title='Red'></div>
</div>
<br>
<br>
&#13;
答案 0 :(得分:1)
我相信以下变化可以实现您的愿望。
更改:
$("#blue_box").click(function(){}
移出您的#actual_verse
mouseup
事件处理程序。每次mouseup
上有#actual_verse
事件时,您都会为蓝框添加另一个点击处理程序。它应该只添加一次。或者,您可以在全局范围中定义函数并为其命名。然后你可以添加它并多次删除它。mousedown
上添加#tooltip
处理程序,该处理程序只调用event.preventDefalut()
。 mousedown
事件是清除选择的事件。这发生在点击事件之前,所以当你到达点击处理程序时,没有选择。selection.removeAllRanges();
添加到blue_box
click
处理程序的末尾,以清除选择以显示突出显示。我认为这是可取的。对于我作为用户,这是我期望发生的事情。hideTooltip()
并将其添加到blue_box
事件处理程序的末尾。作为用户,我希望在点击后工具提示消失。window.addEventListener('mouseup',
但保留正在执行的代码。我不确定为什么该代码是window
mouseup
处理程序。将其作为事件侦听器添加的位置导致每次执行#actual_verse
mouseup
事件处理程序时都会添加另一个处理程序副本,就像blue_box
{{1}一样处理程序。
click
$("#tooltip").mousedown(function(event) {
event.preventDefault();
});
//Only add the listener once, not another listener each mouseup
$("#blue_box").click(function() {
var selection = document.getSelection();
var range = selection.getRangeAt(0);
var contents = range.extractContents();
var node = document.createElement('span');
node.style.backgroundColor = "yellow";
node.appendChild(contents);
range.insertNode(node);
selection.removeAllRanges(); //Clear the selection, showing highlight
hideTooltip();
});
function hideTooltip() {
document.getElementById('tooltip').style.display = ''; //hide the tooltip
}
$("#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;
}
#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;
}
.highlight {
background: yellow;
}