Bir bina holündeki bilgileri görüntülemesi amaçlanan bir web sayfasını gösterirken imleci gizlemek istiyorum. Etkileşimli olması gerekmiyor. İmleç özelliği ve şeffaf bir imleç görüntüsünü denedim ama çalıştırmadım.
Bunun yapılıp yapılamayacağını bilen var mı? Sanırım bu, nereye tıkladığını bilemeyen bir kullanıcı için bir güvenlik tehdidi olarak düşünülebilir, bu yüzden pek iyimser değilim ... Teşekkürler!
Yanıtlar:
CSS ile:
selector { cursor: none; }Bir örnek:
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>Bunu Javascript'teki bir öğeye ayarlamak için styleözelliği kullanabilirsiniz :
<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
document.getElementById('nocursor').style.cursor = 'none';
</script>Bunu tüm vücutta ayarlamak istiyorsanız:
<script type="text/javascript">
document.body.style.cursor = 'none';
</script>Yine de imleci gerçekten gizlemek istediğinizden emin olun. It can gerçekten kızdıran insanlar.
1x1piksel şeffaf png veya% 1 şeffaf png kullanın.
document.body.style.cursor = 'auto'.
İken cursor: noneCSS çözüm sağlam ve kolay kesinlikle geçici çözüm gerçek hedefi için ise, kaldırmak web uygulaması kullanılırken varsayılan imleç ya da uygulamak kendi ham fare hareketi yorumlanması (örneğin FPS oyunlar için), olabilir bunun yerine Pointer Lock API'yi kullanmayı düşünebilirsiniz .
İmleci kaldırmak için bir öğe üzerinde requestPointerLock'u kullanabilir ve tüm mousemoveolayları o öğeye (işleyebileceğiniz veya yönetemeyeceğiniz) yeniden yönlendirebilirsiniz :
document.body.requestPointerLock();Kilidi serbest bırakmak için exitPointerLock'u kullanabilirsiniz :
document.exitPointerLock();İmleç yok, gerçek
Bu çok güçlü bir API çağrısıdır. Yalnızca imlecinizi görünmez hale getirmekle kalmaz, aynı zamanda işletim sisteminizin yerel imlecini de kaldırır . İşaretçi kilidi serbest bırakılıncaya kadar ( bazı tarayıcılarda kullanarak veya basarak ) metin seçemez veya farenizle hiçbir şey yapamazsınız (kodunuzdaki bazı fare olaylarını dinlemek dışında ).exitPointerLockESC
Yani, imleç olmadığı için pencereyi imlecinizle bırakamazsınız, tekrar gösterilmesi için.
Kısıtlamalar
Yukarıda belirtildiği gibi, bu çok güçlü bir API çağrısıdır ve bu nedenle yalnızca web üzerindeki bir tıklama gibi bazı doğrudan kullanıcı etkileşimlerine yanıt olarak yapılmasına izin verilir; Örneğin:
document.addEventListener("click", function () {
document.body.requestPointerLock();
});Ayrıca, izin ayarlanmadıkça requestPointerLockkorumalı alandan iframeçalışmaz allow-pointer-lock.
Kullanıcı bildirimler
Bazı tarayıcılar, kilit devreye girmeden önce kullanıcıdan bir onay ister, bazıları ise sadece bir mesaj görüntüler. Bu, işaretçi kilidinin aramadan hemen sonra etkinleştirilemeyebileceği anlamına gelir. Bununla birlikte, işaretçi kilitlemenin fiili aktivasyonu , çağrılan pointerchangeöğedeki olayı dinleyerek dinlenebilir requestPointerLock:
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});Çoğu tarayıcı mesajı yalnızca bir kez görüntüler, ancak Firefox her aramada mesajı ara sıra spam olarak gönderir. AFAIK, bu yalnızca kullanıcı ayarlarıyla çözülebilir , Firefox'ta işaretçi kilidi bildirimini devre dışı bırakma bölümüne bakın .
Ham fare hareketini dinleme
İşaretçi Kilidi API'si yalnızca fareyi kaldırmakla kalmaz, bunun yerine ham fare hareketi verilerini requestPointerLockçağrılan öğeye yeniden yönlendirir . Bu, yalnızca mousemoveolay kullanılarak ve ardından olay nesnesindeki movementXve movementYözelliklerine erişilerek dinlenebilir :
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});Bunu şeffaf * .cur 1px - 1px ile yaptım, ancak küçük nokta gibi görünüyor. :( Sanırım yapabileceğim en iyi tarayıcılar arası şey. CSS2.1'in 'imleç' özelliği için 'yok' değeri yok - CSS3'e eklendi. Bu yüzden her yerde çalışmıyor.
CSS'de yapmak istiyorsanız:
#ID { cursor: none !important; }!important.
Tüm html belgesi için bunu deneyin
html * {cursor:none}Veya bazı css imlecinizin üzerine yazarsa: hiçbiri kullanmayın!
html * {cursor:none!important}İmleci web sayfasının tamamında gizlemek istiyorsanız, bodygörünür sayfanın tamamını kapsamadığı sürece, bu her zaman böyle değildir. İmlecin sayfanın her yerinde gizlendiğinden emin olmak için şunu kullanın:
document.documentElement.style.cursor = 'none';Yeniden etkinleştirmek için:
document.documentElement.style.cursor = 'auto';Statik CSS gösterimi ile analog tarafından cevap olduğunu Pavel Salaquarda (özünde: html * {cursor:none})