弹出覆盖屏幕，可选文本

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

来源

2017-04-25 Randy

选择不同于点击。 – Roberrrt

@Roberrrt听起来很合理，但我不知道评论如何帮助我在这里。你的意思是我应该做别的事情而不是'stopPropagation'？ – Randy

stopPropagation禁用点击，但不是选择，我有一个建议，你可以使用，一时刻 – Roberrrt

在我的测试中，所有你需要做的就是添加一些文字弹出本身。

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

来源

2017-04-25 14:04:41

如果你三次点击一个文本，你的解决方案不起作用 –

好吧，这让我感到有点惊讶。谢谢！ – Randy

@NathanP。你使用什么浏览器？ – Randy

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

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

来源

2017-04-25 14:05:28 JoeriSmits

虽然这会起作用，但如果弹出窗口关闭并且需要大量工作来主动启用和禁用，则不是理想的选择。 – Randy

我不知道你的应用程序有多复杂，但你可以在启用弹出窗口时在包装div上添加一个类。然后在你的CSS中只在包装上设置这个类时添加'''user-select：none'''。 – JoeriSmits

对于其他情况的很好的解决方案，但上面只是更好一点;） – Randy

弹出覆盖屏幕，可选文本

回答

相关问题