弹出覆盖屏幕，可选文本
如果您单击页面上的任何位置，弹出窗口会上升。该弹出窗口覆盖了屏幕，但如果您单击它三次，则会最后选择p元素。弹出覆盖屏幕，可选文本
我该如何预防？
PS：在这个例子中，我使用JQuery来实现简单的点击事件，但在实际的应用程序中没有。我宁愿不JQuery的溶液（纯JS是好的）
$('.wrapper').on('click', (e) => {
e.stopPropagation();
$('.popup').show();
});
$('.popup').on('click', (e) => {
e.stopPropagation();
$('.popup').hide();
});
$('.popupContent').on('click', (e) => {
e.stopPropagation();
});.popup {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
}
.popupContent {
position:absolute;
left:10%;
top:10%;
width:80%;
height:80%;
background-color:rgba(255,255,255,1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<div class="popup">
<div class="popupContent">
</div>
</div>
</div>
在我的测试中，所有你需要做的就是添加一些文字弹出本身。
通过删除已建立并经过测试的所有文本（如Bootstrap modal）可以轻松进行验证。清空时也会发生同样的情况。
如果元素中不存在，它必须与选择最近的文本节点有关。正如您可能会注意到的那样，它会在您的示例中选择最接近的段落。
$('.wrapper').on('click', (e) => {
e.stopPropagation();
$('.popup').show();
});
$('.popup').on('click', (e) => {
e.stopPropagation();
$('.popup').hide();
});
$('.popupContent').on('click', (e) => {
e.stopPropagation();
});.popup {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
}
.popupContent {
position:absolute;
left:10%;
top:10%;
width:80%;
height:80%;
background-color:rgba(255,255,255,1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<div class="popup">
<div class="popupContent">test
</div>
</div>
</div>
您可以选择将p元素添加user-select: none。
虽然这会起作用，但如果弹出窗口关闭并且需要大量工作来主动启用和禁用，则不是理想的选择。 – Randy
我不知道你的应用程序有多复杂，但你可以在启用弹出窗口时在包装div上添加一个类。然后在你的CSS中只在包装上设置这个类时添加'''user-select：none'''。 – JoeriSmits
对于其他情况的很好的解决方案，但上面只是更好一点;） – Randy
选择不同于点击。 – Roberrrt
@Roberrrt听起来很合理，但我不知道评论如何帮助我在这里。你的意思是我应该做别的事情而不是'stopPropagation'？ – Randy
stopPropagation禁用点击，但不是选择，我有一个建议，你可以使用，一时刻 – Roberrrt