将用户选择约束到节点而不使其可编辑

Question

我有以下页面:

<div class="a">
  ...
</div>
<div class="b">
  ...
</div>

我的用户通过在.a和.b中选择不同的文本片段来与这个页面进行交互。浏览器的本地选择行为几乎工作，但我需要防止我的用户做出选择，它跨越.a和.b之间的边界。

是否有办法将用户的选择限制为<div> ?

不幸的是，此内容不是用户可编辑的-这是不幸的，因为在每个<div>上设置contenteditable="true"实现了我正在寻找的约束。

Answer 1

从这个开始:

HTML:

<div class = "a">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id semper purus. Duis laoreet tellus in ante luctus semper. Praesent interdum urna quis luctus commodo.
</div>
<div class = "b">
    Curabitur vehicula eget leo a tristique. Donec eget aliquam erat. Mauris id porttitor lacus. 
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}
body {
    padding: 10px;
}
.noSelection {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
div + div {
    padding-top: 10px;
}

jQuery:

$(function() {
    $("div").hover(function() {
        $(this).siblings("div").toggleClass("noSelection");    
    });
});

这里有一个小提琴:http://jsfiddle.net/J2fJz/.