Javascript - 防止三次单击时选择整个文本并只选择单个单词答案

【问题标题】：Javascript - Prevent whole text selection on triple click and make selected only single wordJavascript - 防止三次单击时选择整个文本并只选择单个单词
【发布时间】：2017-06-25 02:47:48
【问题描述】：

当我们双击单个单词然后浏览器选择该单词，当我们三次单击单个单词然后浏览器选择整个单行或整个段落。

在这里，我想防止在三次单击时选择所有单词并更改为仅选择单个单词

我用这段代码试过了

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}

【问题讨论】：

clearSelection() 什么时候被调用？
如果那里有任何选定的文本，它将清除@uncoder
我不确定我是否理解。您可以发布完整的 JavaScript 代码，或者为它创建一个 JSFiddle 页面吗？
jsfiddle.net/L6d0p4jo/159@uncoder
我无法使evt.detail 获得值 3。无论我如何点击，它总是以值 0 触发，可能是因为您只订阅了 'click' 事件。您最好的选择可能是查看 jQuery.dblclick() 事件，或者，通常通过 CSS 阻止文本选择：stackoverflow.com/questions/826782/…

标签： javascript jquery double double-click textselection

【解决方案1】：

这对你有用吗？jsfiddle

我编辑你的小提琴。

document.querySelector('div').addEventListener('click', function (evt) {
    var o = this,
        ot = this.textContent;
    if (evt.detail >= 3) {
        clearSelection();
    }
});

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}

【讨论】：

【解决方案2】：

这是我的叉子：http://jsfiddle.net/kr2t0bpw/1/

它在第二次单击时捕获所选单词并保存偏移量。第三次单击时，它会清除选择并使用先前保存的偏移量创建一个新的选择。

var throttle = false;
var sel = window.getSelection();
var selStart = 0;
var selEnd = 0;

document.querySelector('div').addEventListener('click', function (evt) {    
    if (!throttle && evt.detail === 2) {
      selStart = sel.anchorOffset;
      selEnd = sel.focusOffset;
    }

    if (!throttle && evt.detail === 3) {
    var node = this.firstChild;
    sel.removeAllRanges();
    throttle = true;

    var range = document.createRange();
    range.setStart(node, selStart);
    range.setEnd(node, selEnd)

    sel.removeAllRanges();
    sel.addRange(range);
  }
});

【讨论】：