Javascript 弹出覆盖屏幕，可选择下面的文本

如果你点击页面上的任何地方，就会弹出一个窗口。该弹出窗口覆盖屏幕，但如果单击三次，最后一个

p

元素将被选中

我怎样才能防止这种情况

PS：在本例中，我使用JQuery处理简单的点击事件，但在实际应用程序中不使用。我更喜欢没有JQuery的解决方案（普通JS也可以）

$（'.wrapper'）。在（'click'，（e）=>{
e、 停止传播（）；
$（'.popup'）.show（）；
});
$（'popup'）。在（'click'，（e）=>{
e、 停止传播（）；
$（'.popup'）.hide（）；
});
$（'.popupContent'）。在（'click'，（e）=>{
e、 停止传播（）；
});
.popup{
显示：无；
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.8）；
}
.popupContent{
位置：绝对位置；
左：10%；
排名前10%；
宽度：80%；
身高：80%；
背景色：rgba（255255,1）；
}

试验

试验

试验

试验

试验

在我的测试中，您只需在弹出窗口中添加一些文本即可

通过删除已建立并测试过的内容（如。当它被清空时，同样的事情也会发生

如果元素中不存在文本节点，则它必须与选择最近的文本节点有关。因为，正如您可能注意到的，它选择了示例中最接近的段落


$（'.wrapper'）。在（'click'，（e）=>{
e、 停止传播（）；
$（'.popup'）.show（）；
});
$（'popup'）。在（'click'，（e）=>{
e、 停止传播（）；
$（'.popup'）.hide（）；
});
$（'.popupContent'）。在（'click'，（e）=>{
e、 停止传播（）；
});
.popup{
显示：无；
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.8）；
}
.popupContent{
位置：绝对位置；
左：10%；
排名前10%；
宽度：80%；
身高：80%；
背景色：rgba（255255,1）；
}

试验

试验

试验

试验

试验

测试
您可以选择在
p
元素上添加
用户选择：无

请参阅：
选择与单击不同。@roberrt听起来合法，但我不知道该评论如何帮助我。你的意思是我应该做些别的事情而不是
stopPropagation
？stopPropagation会禁用点击，但不会选择，我有一个建议你可以使用，有一刻如果你三次点击一个文本，我们的解决方案就不起作用了好吧，这让我有点吃惊。谢谢大家!@纳桑普。你使用什么浏览器？@Randy Chrome57@NathanP. 我明白你的意思，但我不认为这是不可取的。虽然这会起作用，但如果关闭弹出窗口，这是不可取的，而且要主动启用和禁用弹出窗口将需要大量工作。我不知道你的应用程序有多复杂，但当启用弹出窗口时，你可以在包装器div上添加一个类。然后，在CSS中，当在包装器上设置此类时，只添加
用户选择：none
。对于其他情况，这是一个很好的解决方案，但上面的方法稍微好一点；）没问题，很乐意帮忙。