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

时间:2016-09-02 01:42:54

标签: javascript jquery

我有这个文字。在选择时,将出现具有多种颜色的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'>&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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

我相信以下变化可以实现您的愿望。

更改:

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