单击父级选择子元素的内容

Question

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

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用以下样式，使用此样式不会突出显示内容。

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);

我希望它有所帮助！

Answer 2

您可以使用user-select：none; （加前缀），但你应该仔细考虑可访问性方面的潜在副作用等。

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