彈出覆蓋屏幕，可選文本

如果您單擊頁面上的任何位置，彈出窗口會上升。該彈出窗口覆蓋了屏幕，但如果您單擊它三次，則會最後選擇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

彈出覆蓋屏幕，可選文本

回答

相關問題