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

Question

如果您点击页面上的任意位置，则会弹出一个弹出窗口。该弹出窗口覆盖了屏幕，但是如果您单击它三次，则会选择最后一个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>

Answer 1

在我的测试中，您需要做的就是在弹出窗口中添加一些文本。

通过删除已建立和测试过的所有文本（例如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>

Answer 2

您可以选择在user-select: none元素上添加p。

请参阅：https://jsfiddle.net/s8zm6L37/