单击父选择子元素的内容答案

【问题标题】：Clicking parent selects child element's content单击父选择子元素的内容
【发布时间】：2016-11-08 19:06:21
【问题描述】：

单击父元素（例如带有one 类的div 或body）但在子元素区域之外会使子元素（带有two 类的div）的内容被选中/突出显示，如上图所示。我怎样才能避免这种情况？下面是codepen的链接：

http://codepen.io/anon/pen/EyvVBr?editors=1100

.one,
.two {
  width: 200px;
  height: 200px;
  border: 5px solid green;
  padding: 20px;
  outline: 2px solid black;
}
.two {
  width: 100px;
  height: 100px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.one .two {
  background-image: linear-gradient(left, red, blue);
  background-image: -webkit-linear-gradient(left, red, yellow);
  background-image: -moz-linear-gradient(left, red, yellow);
}

<div class="one">
  <div class="two">
    Content
  </div>
</div>

【问题讨论】：

我认为这是预期的行为，最好不要改变。
我不明白你想突出显示内容还是避免突出显示？
你试过用javascript吗

标签： html css

【解决方案1】：

您可以使用用户选择：无；（加上前缀），但您应该仔细考虑可访问性等方面的潜在副作用。

https://css-tricks.com/almanac/properties/u/user-select/

【讨论】：

Re Aakash 回答，您最好将这些规则添加到最近的相关 dom 节点（div class="two"），而不是整个主体 - 您将被阻止选择任何内容！跨度>

【解决方案2】：

使用下面的样式，使用这个不会突出显示内容。

body {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

你也可以使用Javascript：

element.addEventListener('mousedown', function(e){
    e.preventDefault(); 
}, false);

希望对你有帮助！

【讨论】：

是的，你可以根据自己的需要在 body 或 element 上使用选择器。