javascript - 禁用选择 HTML 元素内的文本

Question

我添加了用户拖动选择文本进行复制的选项（使用 CSS 属性user-select）。问题是它还从其他 HTML 元素复制文本：

<div class='select'>text</div>
<div class='no-select'>
    <b>no-select text</b>
</div>
<div class='select'>text</div>

所以我得到：

text

no-select text

text

有任何想法吗？

Answer 1

:before您可以使用or:after 伪元素来完成此操作：

HTML

<div class="select">text</div>
<div class="no-select">
    <strong data-text="no-select text">no-select text</strong>
</div>
<div class="select">text</div>

CSS

div.no-select > strong[data-text]:after {
    content: attr(data-text);
}

JSFiddle 演示

Answer 2

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

您可以使用user-select: none来实现这一点。请注意兼容性，（http://caniuse.com/user-select-none）注意您必须为-ms-、-moz-和-webkit-.

请记住，如果 1) 用户使用的浏览器不支持此 CSS，或者 2) 他们查看 HTML 源代码，他们仍然可以复制文本。