Javascript -防止在三次单击时选择整个文本,并仅选择单个单词

oogrdqng  于 2023-01-19  发布在  Java
关注(0)|答案(3)|浏览(138)

当我们双击一个单词,然后浏览器选择该单词,当我们三次单击一个单词,然后浏览器选择整个单行或整个段落。
在这里,我想防止在三次单击时选择所有单词,并更改为仅选择单个单词
我试过这个密码

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

nfg76nw01#

这对您有用吗?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();
    }
}
q3qa4bjr

q3qa4bjr2#

这是我的叉子: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);
  }
});
hkmswyz6

hkmswyz63#

这是旧的,我不能添加评论,但对于@kbariotis的答案,你需要在最后将throttle设置为false,否则它只会工作一次。

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);
  }
throttle = false;
});

相关问题