我今天早些时候在一个复杂的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>