浏览器如何确定要选择的文本

Question

我今天早些时候在一个复杂的HTML / CSS布局中调试了一个选择问题，这实际上增加了可用性。除了用户可能想要复制的某些信息文本之外，交互式应用程序中的所有文本都是不可选择的。即使在应用程序根元素的另一侧发生了交互，与应用程序的交互也可能无意中选择了信息文本。

我希望能够更有效地调试这些问题。浏览器究竟如何确定要选择的文本？它是标准化还是基于浏览器？

要提供示例，请参阅以下代码段。如果单击并拖动大框左上角的某个位置（表示完整的应用程序），它将选择左下方框的文本。删除元素.c或将.issue设置为具有100％的宽度和高度将解决这两个都是不合需要的修复问题。

.a{
  position:relative;
  background-color:#AAAAAA;
  height:200px;
  width:600px;
  user-select:none;
  pointer-events:auto;
}
.b{
  background-color:#CCCCCC;
  padding:5px;
  position:absolute;
  left:0;
  bottom:0;
  user-select:auto;
}
.c{
  position:absolute;
  top:50px;
  left:200px;
  border:1px dashed black;
  background-color:rgba(255,255,255,0.5);
  height:50px;
  width:50px;
  user-select:none;
  pointer-events:none;
}
.issue {
  pointer-events:none;
  user-select:none;
}

<div class="a">
  <div style="issue">
    <div class="b">
    Text text text<br>
    Text text
    </div>
  </div>
  <div class="c">

  </div>
</div>