禁用双击文本选择

Question

禁用双击文本选择

12

我有一个切换侧边菜单的脚本：

<script>
    // Closes the sidebar menu
    $("#menu-close").click(function (e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
    // Opens the sidebar menu
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
</script>

我在每个部分标签中都使用它：

ondblclick = $("#menu-close").click()

但问题在于当我双击某个地方时，它也会选择文本。问题是：如何禁用整个页面上的双击选择？如果我能将其实现到我的实际脚本中那就太棒了。

更新：

document.getElementById("el").ondbclick = function(ev) {
    ev.preventDefault()
    alert()
    return false}

$("#menu-close").click(function (e) {
    e.preventDefault();
    $("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function (e) {
    e.preventDefault();
    $("#sidebar-wrapper").toggleClass("active");
});

我不想选择具有id="el"的元素，但它仍然无效。

- Yamiteru Iori

有一些 CSS 规则可以用来实现这个功能 - 正如 @CodeiSir 所指出的那样 - 但不要将它们应用于整个文档，因为这对用户体验不利。只需将它们添加到可能被双击的按钮上即可。 - Rory McCrossan

我忘了说，我的网站的概念是您可以在任何地方双击以切换菜单。因此，我不能在任何按钮上使用它。 - Yamiteru Iori

3个回答

4

(element).querySelector('mousedown', (e) => {
    e.preventDefault()
})

使用纯 JavaScript...

- Abishek H

1

这将禁用双击文本选择，但不会影响大屏幕选择。完美！就像 Atlaskit 按钮一样 https://atlaskit.atlassian.com/packages/core/button - warkentien2

-2

你可以像这样应用类

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

- Hemal

6

这会全局禁用选择功能。我只想在双击时禁用它。 - Yamiteru Iori

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CoderPi · Accepted Answer

在元素上使用这些CSS规则：

#menu-close {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

对于不应被选中的每个元素都要执行此操作。或者只需针对body {执行以适用于所有内容。

如果您不想在任何地方禁用选择，则可以在双击选择后删除它：

document.getElementById("el").ondbclick = function(ev) {
  ev.preventDefault()
  alert()
  return false
}

<div id="el"> asd</div>