限制用戶選擇節點而不使其可編輯？

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