javascript - 如何既保持选择又按下按钮？

Question

我有这段文字。选择后，将出现一个具有多种颜色的 div。单击蓝色 div 或第一个颜色 div 时，文本应突出显示当前突出显示的文本。仅当我删除 #blue_box 的条件 if 语句时，这才有效。我认为单击元素会在程序检索文本之前删除文本的选择。如何保留点击元素，同时跟踪选择？

$("#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'>&nbsp;</div>
<div id='cal2'>&nbsp;</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>

Answer 1

我相信以下更改可以实现您的愿望。

更改:

1. 已将 $("#blue_box").click(function(){} 移出 #actual_verse mouseup 事件处理程序。您每次 #actual_verse 上发生 mouseup 事件时，我们都会为蓝色框添加另一个点击处理程序。它应该只添加一次。或者，您可以在中定义该函数全局范围并命名。然后您可以多次添加和删除它。
2. 在 #tooltip 上添加一个 mousedown 处理程序，该处理程序仅调用 event.preventDefalut() 。 mousedown 事件是清除选择的事件。这发生在点击事件之前，因此当您到达点击处理程序时，没有选择。
3. 添加selection.removeAllRanges();到 blue_box click 处理程序的末尾以清除选择以显示突出显示。我认为这是可取的。对于我作为用户来说，这就是我期望发生的事情。
4. 创建 hideTooltip() 并将其添加到 blue_box 事件处理程序的末尾。作为用户，我希望点击后工具提示就会消失。
5. 删除 window.addEventListener('mouseup', 但保留它正在执行的代码。我不确定为什么该代码是一个 window mouseup 处理程序。将其添加为事件监听器的位置会导致每次执行 #actual_verse mouseup 事件处理程序时添加该处理程序的另一个副本，只需就像 blue_box 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;
}

<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'>&nbsp;</div>
<div id='cal2'>&nbsp;</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>