5771

对于充当按钮（例如，位于 Stack Overflow 页面顶部的Questions、Tags、Users等）或选项卡的锚点，如果用户不小心选择了文本，是否有 CSS 标准方法来禁用突出显示效果?

我意识到这可以通过 JavaScript 来完成，并且通过谷歌搜索产生了仅限 Mozilla 的-moz-user-select选项。

是否有一种符合标准的方式来使用 CSS 实现这一点，如果没有，“最佳实践”方法是什么？

4

50 回答 50

8170

2017 年 1 月更新：

根据Can I use，user-select除了 Internet Explorer 9 及其早期版本（但遗憾的是仍然需要供应商前缀）之外，所有浏览器目前都支持。

这些是所有可用的正确 CSS 变体：

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

请注意，这user-select是在标准化过程中（目前在W3C 工作草案中）。它不能保证在任何地方都可以工作，并且浏览器之间的实现可能存在差异。此外，浏览器将来可能会放弃对它的支持。

更多信息可以在Mozilla Developer Network 文档中找到。

此属性的值为none、text、toggle、element、elements和。allinherit

于 2010-12-10T09:28:22.777 回答
920

在大多数浏览器中，这可以使用 CSSuser-select属性的专有变体来实现，最初在 CSS 3 中提出然后放弃，现在在CSS UI Level 4中提出：

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

对于 Internet Explorer < 10 和Opera < 15，您将需要使用unselectable您希望不可选择的元素的属性。您可以使用 HTML 中的属性进行设置：

<div id="foo" unselectable="on" class="unselectable">...</div>

遗憾的是，这个属性不是继承的，这意味着您必须在<div>. 如果这是一个问题，您可以改为使用 JavaScript 为元素的后代递归地执行此操作：

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

2014 年 4 月 30 日更新：每当向树中添加新元素时，都需要重新运行此树遍历，但从 @Han 的评论看来，可以通过添加设置在目标上的mousedown事件处理程序来避免这种情况unselectable事件。有关详细信息，请参阅http://jsbin.com/yagekiji/1。

这仍然没有涵盖所有可能性。虽然不可能在不可选择的元素中启动选择，但在某些浏览器（例如 Internet Explorer 和 Firefox）中，仍然不可能阻止在不可选择元素之前和之后开始的选择而不使整个文档不可选择。

于 2010-12-05T11:45:11.047 回答
223

在 CSS 3 的用户选择属性可用之前，基于Gecko的浏览器支持-moz-user-select您已经找到的属性。基于 WebKit和 Blink 的浏览器支持该-webkit-user-select属性。

这在不使用 Gecko 渲染引擎的浏览器中当然是不支持的。

没有符合“标准”的快速简便的方法来做到这一点；使用 JavaScript 是一种选择。

真正的问题是，为什么您希望用户不能突出显示并可能复制和粘贴某些元素？我从来没有遇到过我不想让用户突出显示我网站的某个部分的情况。我的几个朋友在花费大量时间阅读和编写代码后，会使用高亮功能来记住他们在页面上的位置，或者提供一个标记，以便他们的眼睛知道下一步该往哪里看。

我认为这很有用的唯一地方是，如果用户复制和粘贴网站时，如果您有不应该复制和粘贴的表单按钮。

于 2009-05-05T20:37:10.103 回答
206

Internet Explorer 的 JavaScript 解决方案是：

onselectstart="return false;"
于 2009-11-13T16:05:58.853 回答
152

如果您想禁用除<p>元素之外的所有内容的文本选择，您可以在 CSS 中执行此操作（注意-moz-none允许在子元素中覆盖的选项，在其他浏览器中允许使用none）：

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}
于 2011-05-24T21:24:53.037 回答
135

在先前答案中的解决方案中，选择已停止，但用户仍然认为您可以选择文本，因为光标仍在更改。为了保持静态，你必须设置你的 CSS 光标：

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

这将使您的文本完全平坦，就像在桌面应用程序中一样。

于 2015-08-30T18:32:57.460 回答
118

您可以在 Firefox 和 Safari（Chrome 也可以？）

::selection { background: transparent; }
::-moz-selection { background: transparent; }
于 2009-05-05T20:46:27.227 回答
87

WebKit的解决方法：

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

我在 CardFlip 示例中找到了它。

于 2011-09-21T07:09:59.487 回答
86

我喜欢混合 CSS + jQuery 解决方案。

要使内部的所有元素<div class="draggable"></div>不可选择，请使用以下 CSS：

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }

然后，如果您使用的是 jQuery，请将其添加到$(document).ready()块中：

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

我认为您仍然希望任何输入元素都是可交互的，因此是:not()伪选择器。'*'如果你不在乎，你可以改用。

警告：Internet Explorer 9 可能不需要这个额外的 jQuery 片段，因此您可能需要在其中添加版本检查。

于 2011-11-11T19:53:19.923 回答
79 

.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

不过，这不是最好的方法。

于 2013-05-01T11:36:36.903 回答
78

您可以为此使用CSS或JavaScript。

旧版浏览器也支持 JavaScript 方式，例如旧版本的Internet Explorer，但如果不是您的情况，请使用 CSS 方式：

HTML/JavaScript：

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML/CSS：

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

于 2017-06-05T14:03:58.940 回答
66

另外对于 Internet Explorer，您需要添加伪类focus(.ClassName:focus) 和outline-style: none.

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}
于 2013-12-23T14:05:05.910 回答
62

尝试将这些行插入 CSS 并在类属性中调用“disHighlight”：

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}
于 2016-08-28T07:13:16.270 回答
59

快速破解更新

如果您none对所有 CSSuser-select属性（包括它的浏览器前缀）使用该值，则仍然会出现问题。

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

正如CSS-Tricks所说，问题是：

如果您选择文本周围的元素， WebKit仍然允许复制文本。

您还可以使用下面的方法来enforce选择整个元素，这意味着如果您单击一个元素，则包含在该元素中的所有文本都将被选中。为此，您只需将值更改none为all.

.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}
于 2018-03-31T11:32:06.000 回答
54

使用SASS（SCSS 语法）

您可以使用mixin执行此操作：

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

在 HTML 标记中：

<div class="no-selectable">TRY TO HIGHLIGHT</div>

在这个CodePen中尝试一下。

如果您使用的是自动前缀，则可以删除其他前缀。

浏览器兼容性在这里。

于 2019-10-11T10:27:13.250 回答
52

对于那些在 Android 浏览器中无法通过触摸事件实现相同功能的用户，请使用：

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}
于 2014-05-19T05:30:01.507 回答
49

在职的

CSS：

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;

这应该有效，但不适用于旧浏览器。存在浏览器兼容性问题。

于 2014-02-27T09:01:50.813 回答
49

如果您使用Less和Bootstrap，您可以编写：

.user-select(none);
于 2012-04-18T08:34:40.057 回答
49 
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

<div id="foo" unselectable="on" class="unselectable">...</div>

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

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

onselectstart="return false;"

::selection { 
    background: transparent; 
}

::-moz-selection { 
    background: transparent; 
}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

<div class="draggable"></div>

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 }

if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');
于 2012-10-26T05:44:15.133 回答
40

除了 Mozilla-only 属性，不，没有办法仅使用标准 CSS 禁用文本选择（截至目前）。

如果您注意到，Stack Overflow 不会禁用其导航按钮的文本选择，我建议在大多数情况下不要这样做，因为它会修改正常的选择行为并使其与用户的期望相冲突。

于 2009-05-05T20:38:05.127 回答
37

这适用于某些浏览器：

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

只需在选择器前面添加您想要的元素/id，用逗号分隔，不带空格，如下所示：

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

其他答案更好；这可能应该被视为最后的手段/总括。

于 2014-04-09T22:56:24.437 回答
37

假设有两个div这样的s：

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}
<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

将光标设置为默认值，这样它会给用户一种无法选择的感觉。

需要使用前缀在所有浏览器中支持它。如果没有前缀，这可能不适用于所有答案。

于 2016-03-28T09:42:03.890 回答
33

如果也不需要颜色选择，这将很有用：

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

...所有其他浏览器修复。它适用于Internet Explorer 9或更高版本。

于 2013-04-03T08:31:10.310 回答
32

将此添加到要禁用文本选择的第一个 div：

onmousedown='return false;' 
onselectstart='return false;'
于 2012-10-30T06:56:19.030 回答
30

笔记：

正确答案是正确的，因为它会阻止您选择文本。但是，它不会阻止您复制文本，正如我将在接下来的几个屏幕截图中展示的那样（截至 2014 年 11 月 7 日）。

在我们选择任何东西之前

我们选择后

号码已被复制

如您所见，我们无法选择数字，但我们能够复制它们。

测试：Ubuntu，谷歌浏览器38.0.2125.111。

于 2014-11-07T13:22:21.950 回答
27

为了得到我需要的结果，我发现我必须同时使用::selection和user-select

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}
于 2015-05-14T00:13:18.510 回答
27

It is easily done with:

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

Alternatively:

Let's say you have a <h1 id="example">Hello, World!</h1>. You will have to remove the innerHTML of that h1, in this case Hello, World. Then you will have to go to CSS and do this:

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

Now it simply thinks it is a block-element, and not text.

于 2018-11-08T09:17:26.867 回答
23

这不是 CSS，但值得一提：

jQuery UI 禁用选择：

$("your.selector").disableSelection();
于 2013-04-09T16:42:23.987 回答
21

Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved.

It's being discussed in How ::selection works on nested elements.

Despite it is being implemented in browsers, you can make an illusion of text not being selected by using the same color and background color on selection as of the tab design (in your case).

Normal CSS Design

p { color: white;  background: black; }

On selection

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

Disallowing users to select the text will raise usability issues.

于 2014-03-21T13:53:43.460 回答
21

在没有 JavaScript 的情况下检查我的解决方案：

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}
<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

应用我的技术的弹出菜单：http: //jsfiddle.net/y4Lac/2/

于 2014-02-22T22:06:41.517 回答
19

我从CSS-Tricks网站上学到了。

user-select: none;

这也是：

::selection {
    background-color: transparent;
}

::moz-selection {
    background-color: transparent;
}

::webkit-selection {
    background-color: transparent;
}
于 2016-04-01T11:16:39.077 回答
16

目前user-select所有浏览器都支持。

这些是所有可用的正确 CSS 变体：

.noselect {
  -webkit-user-select: none;    /* Safari */
  -webkit-touch-callout: none;  /* iOS Safari */
  -khtml-user-select: none;     /* Konqueror HTML */
  -ms-user-select: none;        /* Internet Explorer/Edge */
  -moz-user-select: none;       /* Old versions of Firefox */
   user-select: none;           /* Non-prefixed version*/
}
<p>
  Selectable
</p>

<p class="noselect">
  Unselectable
</p>

于 2021-05-03T18:20:15.513 回答
15

如果您想禁用整个页面的选择和突出显示，您可以使用 CSS 轻松做到这一点：

* {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}
于 2018-04-30T03:47:18.847 回答
11

尝试使用这个：

::selection {
    background: transparent;
}

如果你想指定在特定元素内不选择，只需将元素类或id放在选择规则之前，例如：

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}
于 2016-01-20T09:22:16.107 回答
11

第一种方法：（完全废话）：

.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select { /* Sometimes I add this too. */
  cursor: default;
}

<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

片段：

.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select {
  /* Sometimes I add this too. */
  cursor: default;
}
<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

第二种方法（包括废话）

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

片段：

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

首先，解决问题。然后，编写代码。

约翰·约翰逊

于 2021-11-27T11:52:38.580 回答
10

您可以使用以下*-user-select属性...

p {
    -webkit-user-select: none;  /* Chrome all and Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* Internet Explorer 10 and later */
    user-select: none;          /* Likely future */
}

详细说明的链接

于 2016-09-06T09:04:22.467 回答
10

利用：

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
于 2016-04-15T09:29:51.543 回答
9

你试过这个吗？

.disableSelect{
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;

    pointer-events:none;
}
于 2020-09-03T14:14:55.590 回答
9

这种突出显示效果是由于称为悬停(onMouseHover) 的操作。

当您将鼠标悬停在任何选项卡上时，其颜色将发生变化。

举个例子，

HTML 代码

<div class="menu">
    <ul class="effect">
        <li>Questions</li>
        <li>JOBS</li>
        <li>Users</li>
    </ul>
</div>

CSS 代码

.effect:hover {
    color: none;
}

如果你想让它突出显示，你可以使用任何颜色。否则你可以使用none.

于 2016-06-03T13:12:16.593 回答
8

向您的 CSS 添加一个类，定义您不能选择或突出显示元素。我有一个例子：

<style> 
    .no_highlighting{
        user-select: none;
    }

    .anchor_without_decoration:hover{
        text-decoration-style: none;
    }
</style>

<a href="#" class="anchor_without_decoration no_highlighting">Anchor text</a>
于 2020-03-06T10:33:17.977 回答
7

使用 CSS-

div {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;

  "unselectable='on' onselectstart="return false;"
  onmousedown="return false;
}
<div>
  Blabla
  <br/> More Blabla
  <br/> More Blabla...
</div>

于 2018-09-22T14:23:07.150 回答
6

我看到了许多详细的答案，但我相信仅编写这行代码就足以完成所需的任务：

*{
    -webkit-user-select: none;
 }
于 2021-07-10T11:16:46.337 回答
4

我将各种浏览器 CSS 选择属性与 Internet Explorer < 9 所需的不可选择标签组合在一起。

<style>
[unselectable="on"] {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer 10+/Edge */
    user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>
于 2018-02-01T20:23:34.533 回答
4

更好的是，您可以禁用文本选择。

如果你喜欢 Sass (SCSS)，并且不想使用Compass，你可以这样做：

styles.scss

@mixin user-select($select) {
    -webkit-touch-callout:#{$select};
    @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
        #{$pre + user-select}: #{$select};
    }
    #{user-select}: #{$select};
}

.no-select {
    @include user-select(none);
}
于 2018-01-31T00:05:39.950 回答
1

也许您可以通过以下方式使用此解决方案:before：

nav li {
    display: inline-block;
    position: relative;
}

nav li a {
    display: inline-block;
    padding: 10px 20px;
}

nav li a:hover {
    color: red;
}

nav li.disabled:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
<nav>
    <ul>
    <li><a href="#">Link</a></li>
    <li class="disabled"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
</nav>

JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/

于 2017-03-02T17:34:38.827 回答
1 
::selection {background: transparent; color: transparent;}

::-moz-selection {background: transparent; color: transparent;}
于 2018-10-31T06:13:51.243 回答
0

这可能有效

    ::selection {
        color: none;
        background: none;
    }
    /* For Mozilla Firefox */
    ::-moz-selection {
        color: none;
        background: none;
    }
于 2020-01-17T01:01:57.273 回答
0 
//prevent right key    
 document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
    return false
  });
//prevent selection
 window.addEventListener('selectstart', (e)=>{ e.preventDefault() });
于 2021-12-27T12:44:06.717 回答
0

您可能还想防止在触摸元素（如阻止其选择的按钮）时出现上下文菜单。为此，请将此代码添加到整个页面，或者只是那些按钮元素：

$("body").on("contextmenu",function(e){
    return false;
});
于 2019-08-27T07:17:04.677 回答
-6 
<script type="text/javascript">
    if(typeof document.onselectstart!="undefined"){
        document.onselectstart=new Function ("return false");
    }else{
        document.onmousedown= new Function ("return false");
        document.onmouseup= new Function ("return true");
    }
</script>
于 2019-12-06T12:54:28.367 回答