突出显示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。

Answer 2

听起来你正在寻找一些jQuery，它将点击事件绑定到所有<p>标签，并将所有未点击标签的CSS更改为user-select: none;。释放鼠标后，将所有<p>标签更改回正常user-select: all;

我的代码是一种资源密集型，因此您可能希望根据自己的喜好优化选择器。

JSFiddle

<强> HTML

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis partu
</p>
<p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam 
</p>
<p>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam 
</p>

<强> CSS

.select_off{
    -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -o-user-select: none;
     -ms-user-select: none;
     user-select: none;
}

<强> JS

$(document).ready(function(){

    // Mouse was clicked down
    $(document).on('mousedown', 'p', function(){

        // Give all <p> tags an ID if they do not have one
        var i = 1;
        $('p').each(function(){

            if(!$(this).attr('id')){
                $(this).attr({'id':'unique_'+i+'id'});
            }

            i += 1;
        });

        var p_clicked = $(this);
        var p_clicked_id = p_clicked.attr('id');

        // Loop through <p> tags and add the .select_off class
        $('p').each(function(){
            if($(this).attr('id') != p_clicked_id){
                $(this).addClass('select_off');
            }
        });
    });

    // Mouse was released
    $(document).on('mouseup', 'p', function(){

        // Loop through <p> tags and remove the .select_off class
        $('p').each(function(){
            $(this).removeClass('select_off');
        });
    });
});

Answer 3

这是一种非jquery方式来做@MonkeyZeus的建议：

<强> JS

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

<强> CSS

p{
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

p.select-on{
 -webkit-user-select: text;
 -khtml-user-select: text;
 -moz-user-select: text;
 -o-user-select: text;
 -ms-user-select: text;
 user-select: text;
}

Fiddle