Question

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

＆＃13;

$("#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
  }

});

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 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;
}

如何保持选择但也按下按钮？

1 个答案: