jquery - 突出显示 p 标签，但不突出它旁边的标签

Question

我的网页上有一个部分，用户必须能够轻松选择文本，以便他们可以随时将其粘贴到其他地方。我的问题是我有两个段落彼此相邻，当他们选择一个段落时，它会自动选择紧挨着的段落。

在我的其他元素上，我有类似这样的东西来完全防止选择。

-webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;

但我根本不想阻止他们选择它，只是不能同时选择。有什么办法吗？

这两段是这样的

他们目前在做什么

我希望他们做什么

我的 html 看起来像这样

<div class="span12">
  <h4>Title</h4>
  <div class="span3">Photo</div>
  <div class="span4"><p>Text</p></div>
  <div class="span5"><p>Text</p></div>
</div>

Answer 1

所以你似乎想突出显示 <p>标记他们开始突出显示的位置，但不是任何也恰好被拉入选择的标记？这不会在进行中停止重叠选择，但它会在事后使用一些 js 对其进行更正(如果您不使用它，则不需要 jquery):

var originalEl;
document.addEventListener('mousedown', function(e){
  if(e.target.tagName == "P") originalEl = e.target;
  else originalEl = null;
});

document.addEventListener('mouseup', function ( e ) {
  if(originalEl) selectElementText(originalEl);
}, false );

选择函数来自this answer :

function selectElementText(el, win) {
  win = win || window;
  var doc = win.document, sel, range;
  if (win.getSelection && doc.createRange) {
    sel = win.getSelection();
    range = doc.createRange();
    range.selectNodeContents(el);
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (doc.body.createTextRange) {
    range = doc.body.createTextRange();
    range.moveToElementText(el);
    range.select();
  }
}

这是一个fiddle .