是否可以将文本选择限制为当前元素？答案

【问题标题】：Is it possible to limit text selection to current element?是否可以将文本选择限制为当前元素？
【发布时间】：2018-02-21 12:30:04
【问题描述】：

<div class="container">
<div class="item1">text text text in div 1</div>
<div class="item2">text text text in div 2</div>
</div>

如果选择从 div.item1 中的文本开始，是否可以（通过任何 HTML 节点、CSS 或 JS）阻止选择 div.item2 中的文本，反之亦然 - 从 div.item2 开始并限制为它（防止选中 item1 表单）？

【问题讨论】：

Is there a way to make a DIV unselectable?的可能重复
那么，如果在 item1 上触发 click 事件，唯一的方法是在 item2 中添加 user-select: none ，反之亦然？

标签： javascript html css

【解决方案1】：

我想出了这个，用一点 jQuery 代码：

let $items = $(".item")

$items
	.mousedown( function() {
		$(this).siblings().css({ "user-select" : "none" , color : "lightgrey"})	
	})
	.mouseup( function() {
		$items.css({ "user-select" : "auto" , color : "black"})	
	})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="item">text text text in div 1</div>
	<div class="item">text text text in div 2</div>
	<div class="item">text text text in div 3</div>
	<div class="item">text text text in div 4</div>
</div>

【讨论】：

有个小问题 :) 如果你从底部开始选择，你可以全选
@JeremyThile 如果结构是表 IMAO 也不起作用
如果结构是表格当然不行。你从来没有谈论过一张桌子……但现在你有了一个工作示例，你明白了，你可以把它改编成一张桌子:)
@Temani 你是对的，但 OP 的问题明确是关于从 div1 或 div2 开始并防止选择其他人。

【解决方案2】：

最简单的方法是使用 CSS：

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

<div class="item1"> Unselectable text</div>
<div class="item2"> Selectable text</div>

【讨论】：

已经发布然后删除。如何从 div2 开始，防止 div1 选择？
只需将此代码复制到一个空的.html 并运行它！
我做得更好。我用你的代码做了一个可运行的 sn-p，所以你可以看到它不起作用:)
@Nobody 这个问题的线索是应该动态完成。如果你从第2项开始，你的答案是没有用的
您可以动态更改 CSS 属性。此外，如果您从 item2（从下到上）开始 item1 仍然无法选择。那么这段代码有什么问题呢？