防止dbclicking文本時，選擇下一個DOM CONTENTEDITABLE

Question

我有以下CONTENTEDITABLE DIV，裏面混合文本和DOM如下：

some text<span> which i would </span><span>like to select </span> 

我的問題是，我想，以防止雙擊詞的選擇跨越周圍。例如，如果我雙擊單詞'which'，它只會選擇這個單詞，這是所需的行爲。但問題是，如果我選擇'會'這個詞，它會選擇'會'。我怎樣才能選擇'會'沒有跨雙clic事件？

我試圖在前後添加空格，但沒有結果。

Answer 1

只需添加JavaScript的這個小片段和單個詞將span元素中可選：即使我是一個span元素外發生

$('span').dblclick(function(e){ 
 
    e.preventDefault(); 
 
    var selection = window.getSelection(); 
 
    if (selection.toString().indexOf(' ') > -1) 
 
    { 
 
     var range = selection.getRangeAt(0); 
 
     var start = range.startOffset; 
 
     var finish = range.endOffset - 1; 
 
     setSelectionRange(this, start, finish); 
 
    } 
 
}); 
 

 
function getTextNodesIn(node) { 
 
    var textNodes = []; 
 
    if (node.nodeType == 3) { 
 
     textNodes.push(node); 
 
    } else { 
 
     var children = node.childNodes; 
 
     for (var i = 0, len = children.length; i < len; ++i) { 
 
      textNodes.push.apply(textNodes, getTextNodesIn(children[i])); 
 
     } 
 
    } 
 
    return textNodes; 
 
} 
 

 
function setSelectionRange(el, start, end) { 
 
    if (document.createRange && window.getSelection) { 
 
     var range = document.createRange(); 
 
     range.selectNodeContents(el); 
 
     var textNodes = getTextNodesIn(el); 
 
     var foundStart = false; 
 
     var charCount = 0, endCharCount; 
 

 
     for (var i = 0, textNode; textNode = textNodes[i++];) { 
 
      endCharCount = charCount + textNode.length; 
 
      if (!foundStart && start >= charCount 
 
        && (start < endCharCount || 
 
        (start == endCharCount && i <= textNodes.length))) { 
 
       range.setStart(textNode, start - charCount); 
 
       foundStart = true; 
 
      } 
 
      if (foundStart && end <= endCharCount) { 
 
       range.setEnd(textNode, end - charCount); 
 
       break; 
 
      } 
 
      charCount = endCharCount; 
 
     } 
 

 
     var sel = window.getSelection(); 
 
     sel.removeAllRanges(); 
 
     sel.addRange(range); 
 
    } else if (document.selection && document.body.createTextRange) { 
 
     var textRange = document.body.createTextRange(); 
 
     textRange.moveToElementText(el); 
 
     textRange.collapse(true); 
 
     textRange.moveEnd("character", end); 
 
     textRange.moveStart("character", start); 
 
     textRange.select(); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
some text<span> which i would </span><span>like to select </span>