JavaScript: 禁用通过双击选择文本

21 浏览
0 Comments

JavaScript: 禁用通过双击选择文本

当双击 HTML 页面时,大多数浏览器会选择您双击的单词(或三击的段落)。有没有办法取消这种行为?\n请注意,我并不想通过单击+拖动来禁用常规选择,即 jQuery UI 的 $(\'body\').disableSelection()document.onselectstart DOM 事件不是我想要的。

0
0 Comments

原因:用户想要禁用通过双击选择文本,但是之前提供的解决方法只能禁用通过单击和拖拽选择文本。

解决方法:使用以下CSS代码可以禁用双击选择文本:

-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;

文章整理如下:

通过使用上述CSS代码,可以禁用双击选择文本。请注意,这种方法只会禁用双击选择,而不会影响通过单击和拖拽选择文本的操作。

-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;

请注意,这种方法只适用于CSS,如果需要在JavaScript中实现禁用双击选择文本的功能,可以使用其他方法。

0
0 Comments

问题的出现原因是因为在某些浏览器中,双击文本会导致文本被选中。解决方法是使用JavaScript代码来禁用文本通过双击进行选择。

在当前版本的Chrome(v56),Firefox(v51)和MS Edge(v38)浏览器中,以下代码可以解决该问题:

var test = document.getElementById('test');
test.addEventListener('mousedown', function(e){
    if (e.detail > 1){
        e.preventDefault();
    }
});

上述代码使用addEventListener方法将mousedown事件绑定到id为"test"的元素上。当鼠标按下时,代码会检查该事件的detail属性,该属性记录了当前的点击次数。如果点击次数大于1(即双击或更多次点击),则通过调用preventDefault方法来阻止默认的文本选择行为。

需要注意的是,Internet Explorer浏览器在超时期后不会重置计数器,因此无法得到连续点击的次数,而是得到自页面加载以来用户点击的次数。

不确定是否只有最近才能实现这一点,但这是唯一提供完美解决方案的答案。

0
0 Comments

JavaScript: 禁用双击选择文本

在浏览器中,阻止选择本身是"原生行为",但是你可以在选择后立即清除选择:

document.ondblclick = function(evt) {
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();
}

编辑:为了防止通过"三连击"选择整个段落,这是所需的代码:

var _tripleClickTimer = 0;
var _mouseDown = false;
document.onmousedown = function() {
    _mouseDown = true;
};
document.onmouseup = function() {
    _mouseDown = false;
};
document.ondblclick = function DoubleClick(evt) {
    ClearSelection();
    window.clearTimeout(_tripleClickTimer);
    // 处理三连击选择整个段落
    document.onclick = function() {
        ClearSelection();
    };
    _tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000);
};
function RemoveDocumentClick() {
    if (!_mouseDown) {
        document.onclick = null; 
        return true;
    }
    _tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000);
    return false;
}
function ClearSelection() {
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();
}

实时测试案例

应该跨浏览器兼容,请报告任何不起作用的浏览器。

感谢,效果很好。尽管我使用了一个匿名函数而不是给它一个名称 - 我认为这没有多大意义,因为它立即被分配并且不太可能在其他地方使用。

谢谢,我同意你关于匿名函数的观点,给每个东西都起一个名称只是我旧习惯(坏习惯)。

但它是一个习惯,它可以帮助调试器在查看堆栈时知道函数的名称,而不是看到一堆匿名函数。Firefox更擅长猜测函数名称,IE在大多数堆栈中都显示为匿名。

谢谢,好观点...当我需要调试时,我通常使用alert,所以这并不重要。:-)

抱歉提起这个旧帖子,但是这段代码在三连击时不起作用,浏览器通常会选择整个段落。有什么解决方法吗?

能否解释一下什么是三连击?它不只是双击然后普通点击吗?无论如何,没有事件可以处理这种情况,所以恐怕没有什么可以做的。

好的,例如,当你单击一次时,它会将焦点设置在文本上,当你双击时,它会选择单词,当你三连击时,它会选择整个段落。在我的情况下,我有一个按钮,可以在短时间内点击多次,由于它只是一个按钮,它会在每第三次点击时选择周围的文本,然后再次点击时,选择消失,这个过程会在用户继续点击按钮时重复发生。有什么解决方法吗?

我现在明白了。看看我的编辑-不确定你的按钮是什么样的,随时更新我的示例以演示,我会看看发生了什么。

当你继续点击时,高亮会"闪烁"...不用担心,我猜我只能这样做。:) 对于你的帮助,加一。

是的,这是由代码的特性引起的,只有在选择已经完成后才起作用。

对于那些三连击,你可以使用`setTimeout(ClearSelection, 25);`。根据用户通常点击的速度,你可能需要微调一下超时时间。

谢谢,也谢谢你的编辑,之前写的是在不知道匿名函数的情况下,后来没有注意到。

对于三连击,还有一个小错误(ff 15,Windows 7)-如果我双击,然后再点击一次,但按下按钮超过一秒钟,段落仍然会被选择...

发现了!错误已修复。在Chrome中看到并修复了这个问题,应该适用于所有浏览器,使用了添加一个标志来检查鼠标按钮在清除文档点击事件之前是否释放的标准解决方案。 🙂

这不仅存在问题,而且用户体验也很糟糕。很多网站还滥用这个来防止复制文本,而不是防止可点击元素的蓝色选择。出于人道主义的考虑,我给你点个踩。

抱歉让你有糟糕的用户体验,但你应该责怪网站所有者和/或坚持使用这些功能的客户,而不是诋毁传达信息的人。

0