正文 

当前位置： 首页 > 问答 >

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

     2023-03-05     13

关键词：

【中文标题】JavaScript：通过双击禁用文本选择【英文标题】：JavaScript: Disable text selection via doubleclick 【发布时间】：2011-05-06 06:31:24 【问题描述】：

当双击 html 页面时，大多数浏览器会选择双击的单词（或三次单击的段落）。有没有办法摆脱这种行为？

请注意，我不想通过单击+拖动来禁用常规选择；即 jQuery UI 的 $('body').disableSelection() 和 document.onselectstart DOM 事件不是我想要的。

【问题讨论】：

不是我的决定。我正在为其编码的人想要这样。可能是因为该页面是浏览器游戏的一部分，并且一些增加/减少值的按钮（带有点击事件的 div）吸引用户双击，因为这比多次单击它们要快。如果这样选择的东西很烦人，看起来很奇怪。 ***.com/questions/880512/… 【参考方案1】：

我担心您无法阻止选择本身成为浏览器的“本机行为”，但您可以在选择完成后立即清除：

<script type="text/javascript">
document.ondblclick = function(evt) 
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();

</script>

编辑：也防止通过“三次单击”选择整个段落，这里是所需的代码：

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);

    //handle triple click selecting whole paragraph
    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();
​

Live test case.

应该是跨浏览器，请报告任何不工作的浏览器。

【讨论】：

谢谢，工作正常。即使我使用了一个匿名函数而不是给它一个名字——我认为这没有多大意义，因为它是立即分配的，不太可能在其他地方使用。 干杯，我同意你关于匿名函数的观点，给所有东西命名只是我的旧（坏？）习惯。 :// 但这是一种习惯，可以帮助调试器在您查看堆栈时知道函数的名称，而不是看到一堆匿名的。 FF 在猜测函数名方面要好得多，IE 对我的大多数堆栈都显示匿名 @Juan 谢谢，好点.. 当我必须调试时，我通常会使用警报，所以这并不重要。 :-) @sleepycal 对您糟糕的用户体验感到抱歉，但您应该责怪网站所有者和/或坚持使用此类功能的客户，而不是攻击信使。【参考方案2】：

把这个放在css感兴趣的部分

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

【讨论】：

请再次阅读问题：请注意，我不想通过单击+拖动来禁用常规选择 这似乎很完美。没有双。没有三重奏。没有选择..谢谢 @ThiefMaster 不要对我苛刻 :) 我不懂英语，我正在练习。我在阅读请求时出错了 虽然它没有回答问题，但正是我想要的，谢谢。【参考方案3】：

以下内容适用于当前的 Chrome (v56)、Firefox (v51) 和 MS Edge (v38) 浏览器。

var test = document.getElementById('test');
test.addEventListener('mousedown', function(e)
    if (e.detail > 1)
        e.preventDefault();
    
);
&lt;p id="test"&gt;This is a test area&lt;/p&gt;

MouseEvent.detail 属性跟踪 current click count，可用于确定事件是两次、三次还是更多点击。

不幸的是，Internet Explorer 不会在超时后重置计数器，因此您可以获得自页面加载以来用户点击次数的计数，而不是获取突发点击次数。

【讨论】：

不确定这是否只是最近才突然成为可能，但这是提供完美解决方案的唯一答案。【参考方案4】：

如果您真的想在双击时禁用选择，而不是在之后删除选择（对我来说看起来很难看），您需要在第二个 mousedown 事件中return false（ondblclick won' t 工作，因为选择是在鼠标按下时进行的）。

**如果有人根本不想选择，最好的解决方案是像 Maurizio Battaghini 建议的那样使用 CSS user-select : none;。

// set to true if you want to disable also the triple click event
// works in Chrome, always disabled in IE11
var disable_triple_click = true;

// set a global var to save the timestamp of the last mousedown
var down = new Date().getTime();
var old_down = down;

jQuery(document).ready(function($)

    $('#demo').on('mousedown', function(e)
    
        var time = new Date().getTime();

        if((time - down) < 500 && 
        (disable_triple_click || (down - old_down) > 500))
        
            old_down = down;
            down = time;

            e.preventDefault(); // just in case
            return false; // mandatory
        

        old_down = down;
        down = time;
    );
);

Live demo here

重要提示：我将灵敏度设置为 500 毫秒，但 双击灵敏度（检测为双击的两次单击之间的最大时间）可能因操作系统和浏览器而异，并且是通常是用户可配置的。 - api.jquery.com

在 Chrome 和 IE11 中测试。

【讨论】：

【参考方案5】：

只是把它扔在那里，但这是我在我希望用户快速点击的页面中添加的代码。但是，这也会禁用标准的单击并拖动文本选择。

document.body.onselectstart = function() 
    return false;

document.body.style.MozUserSelect = "none";
if (navigator.userAgent.toLowerCase().indexOf("opera") != -1) 
    document.body.onmousedown = function() 
        return false;

似乎对我很有效。

【讨论】：

如何禁用文本选择突出显示

...有CSS标准方法来禁用突出显示效果？我意识到这可以通过JavaScript完成，并且通过谷歌搜索得到了Mozill 查看详情

禁用文本选择并添加例外

...down=\'returnfalse;\'onselectstart=\'returnfalse;\'是否可以通过使用javascript输入textareas和选择来给出异常？如果是的话，你 查看详情

javascript在网站上禁用（文本）选择(代码片段)

查看详情

如何防止在Javascript中双击选择文本

】如何防止在Javascript中双击选择文本【英文标题】：Howtopreventthedouble-clickselecttextinJavascript【发布时间】：2012-04-2809:32:37【问题描述】：假设我在页面中有一个ul(li)列表：<ul><li>xxx<li><li>xxx<li></ul>元素li... 查看详情

如何使用 JavaScript 暂时禁用文本选择？

】如何使用JavaScript暂时禁用文本选择？【英文标题】：HowcanIdisableTextSelectiontemporarilyusingJavaScript?【发布时间】：2010-10-2720:31:11【问题描述】：这是一个有点具体的问题，所以我会直奔主题。我正在为Web应用程序的一部分开发一... 查看详情

CSS 或 Javascript 禁用从 CTRL + A 突出显示的文本选择

】CSS或Javascript禁用从CTRL+A突出显示的文本选择【英文标题】：CSSorJavascripttodisabletextselectionhighlightingfromCTRL+A【发布时间】：2013-05-1911:59:54【问题描述】：注意：这个问题与HowtodisabletextselectionhighlightingusingCSS?不同在提问之前，我... 查看详情

在 DocumentViewer 中禁用文本选择

...DocumentViewer的文本选择？这是查看器显示XPS文档然后可以通过鼠标突出显示文本的功能。突出显示的文本也可以复制，但我已经禁用了它。我只是不知道如何禁用突出显示。谢谢！【问题讨论】：【参考方案1】： 查看详情

禁用 Chrome for Android 文本选择弹出窗口

...弹出窗口（附加屏幕截图）就不会出现。有没有办法使用javascript来做，而不是从整体上删除文本选择功能？【问题讨论】：【参 查看详情

如何使用 AngularJS 根据下拉选择值禁用输入文本框？

...发布时间】：2020-03-2919:51:54【问题描述】：我在AngularJS的JavaScript中有以下内容$("#listOptionFruit").kendoDropDownList(autoBind:tru 查看详情

禁止选择文本和禁用右键v2.0

禁止鼠标右键（注：在火狐浏览器没有起到效果作用）<script>functionstop(){returnfalse};document.oncontextmenu=stop;javascript:;</script>  查看详情

Android：禁用网页视图中的文本选择

...化的内容。对于某些交互（特定于某些dom元素），我使用javascript和WebView.addJavascriptInterface()。现在，我想识别长触摸。不幸的是，onLongTou 查看详情

IE - 如果选择框具有特定类，则阻止焦点（单击，双击）

...【发布时间】：2011-01-1509:53:56【问题描述】：我正在使用javascript来模拟禁用的选择元素。由于.net验证器失败，我实际上无法禁用它，但这是另一回事。我有以下功能：functionpreventFocus(e)i 查看详情

如何取消编辑/禁用缓存输入（文本类型）值？

...行的文本框非常令人沮丧。有没有办法不通过HTML标记或javascript显示12334（在屏幕截图中突出显 查看详情

使用 JS 在混合应用程序中禁用文本选择和复制粘贴

...程序中禁用文本选择和复制粘贴。CSS-webkit-user-select:none;JavaScript$(\'body\').on(\'cutcopypaste\', 查看详情

如何禁用提交按钮，直到所有文本字段都已满并选择文件

...sselected【发布时间】：2016-03-0314:19:09【问题描述】：我是javascript/jquery的新手，所以我可能遗漏了一些明显的东西，但我找到了在所有文本字段都填满之前禁用提交按钮的解决方案，并且我找到了在文件被填充之前禁用它的解决... 查看详情

MVC3：通过Javascript获取下拉菜单选择的值/文本

】MVC3：通过Javascript获取下拉菜单选择的值/文本【英文标题】：MVC3:GetDropdownmenuselectedvalue/textviaJavascript【发布时间】：2012-11-3007:24:41【问题描述】：在MVC3上，下拉列表定义为@Html.dropDownList(m=>m.model,newSelectList(m.myList,"value","text")... 查看详情

如何通过Javascript从选择列表中添加具有值的HTML文本字段

】如何通过Javascript从选择列表中添加具有值的HTML文本字段【英文标题】：HowtoaddHTMLtextfieldwithvaluefromselectlistviaJavascript【发布时间】：2016-07-3118:16:26【问题描述】：我有这样的选择列表：$.fn.optionTest=function(opts)varoption=$.extend(,$.fn.... 查看详情

一个通过值选择器接受特定值的文本框

】一个通过值选择器接受特定值的文本框【英文标题】：ATextBoxwhichwillacceptspecificvaluesviavaluepicker【发布时间】：2012-03-2418:06:41【问题描述】：我有一个简单的dojo文本框和一个值选择器。我想禁用此字段以进行手动输入，以便仅... 查看详情