Kullanıcı tarayıcısında ok tuşuyla kaydırmayı devre dışı bırakın

Question 1

Canvas ve javascript kullanarak bir oyun yapıyorum.

Sayfa ekrandan daha uzun olduğunda (yorumlar vb.) Aşağı oka basmak sayfayı aşağı kaydırır ve oyunun oynanmasını imkansız hale getirir.

Oyuncu sadece aşağı inmek istediğinde pencerenin kaymasını önlemek için ne yapabilirim?

Sanırım Java oyunlarında ve benzeri, kullanıcı oyuna tıkladığı sürece bu bir sorun değil.

Çözümü denedim: Ok tuşlarıyla FF'de sayfa kaydırma nasıl devre dışı bırakılır , ancak çalışmasını sağlayamadım.

Question 2

Özet

Varsayılan tarayıcı eylemini engellemeniz yeterlidir :

window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

Orijinal cevap

Aşağıdaki işlevi kendi oyunumda kullandım:

var keys = {};
window.addEventListener("keydown",
    function(e){
        keys[e.keyCode] = true;
        switch(e.keyCode){
            case 37: case 39: case 38:  case 40: // Arrow keys
            case 32: e.preventDefault(); break; // Space
            default: break; // do not block other keys
        }
    },
false);
window.addEventListener('keyup',
    function(e){
        keys[e.keyCode] = false;
    },
false);

Sihir gerçekleşir e.preventDefault();. Bu, olayın varsayılan eylemini engeller, bu durumda tarayıcının bakış açısını hareket ettirir.

Mevcut düğme durumlarına ihtiyacınız yoksa, basitçe bırakabilir keysve ok tuşlarındaki varsayılan eylemi iptal edebilirsiniz:

var arrow_keys_handler = function(e) {
    switch(e.keyCode){
        case 37: case 39: case 38:  case 40: // Arrow keys
        case 32: e.preventDefault(); break; // Space
        default: break; // do not block other keys
    }
};
window.addEventListener("keydown", arrow_keys_handler, false);

Bu yaklaşımın, daha sonra ok tuşuyla kaydırmayı yeniden etkinleştirmeniz gerekirse olay işleyicisini kaldırmanıza da olanak tanıdığını unutmayın:

window.removeEventListener("keydown", arrow_keys_handler, false);

Referanslar

MDN: window.addEventListener
MDN: window.removeEventListener

Question 3

Sürdürülebilirlik için, "engelleme" işleyicisini öğenin kendisine (sizin durumunuzda, tuvale) eklerdim.

theCanvas.onkeydown = function (e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        e.view.event.preventDefault();
    }
}

Neden basitçe yapmıyorsunuz window.event.preventDefault()? MDN devletler:

window.eventyalnızca bir DOM olay işleyicisi çağrılırken kullanılabilen tescilli bir Microsoft Internet Explorer özelliğidir. Değeri, halihazırda işlenmekte olan Event nesnesidir.

Diğer okumalar:

Question 4

Ok tuşlarına basıldığında kaydırmayı engellemenin farklı yollarını denedim, hem jQuery hem de yerel Javascript - hepsi Firefox'ta iyi çalışıyor, ancak Chrome'un son sürümlerinde çalışmıyor. Tek çalışan çözüm olarak önerilen
açık {passive: false}mülk bile, window.addEventListenerörneğin burada .

Sonunda, birçok denemeden sonra, hem Firefox hem de Chrome'da benim için çalışan bir yol buldum:

window.addEventListener('keydown', (e) => {
    if (e.target.localName != 'input') {   // if you need to filter <input> elements
        switch (e.keyCode) {
            case 37: // left
            case 39: // right
                e.preventDefault();
                break;
            case 38: // up
            case 40: // down
                e.preventDefault();
                break;
            default:
                break;
        }
    }
}, {
    capture: true,   // this disables arrow key scrolling in modern Chrome
    passive: false   // this is optional, my code works without it
});

İçin alıntı EventTarget.addEventListener()gelen MDN'yi

seçenekler İsteğe Bağlı
   Bir seçenekler nesnesi, olay dinleyicisiyle ilgili özellikleri belirtir. Mevcut seçenekler şunlardır:

catch
   A Boolean, bu türdeki olayların , DOM ağacında altındakilere listenergönderilmeden önce kaydedilen kişiye gönderileceğini belirtir EventTarget.
bir kere
   ...
pasif
   A Boolean, eğer doğruysa, ile belirtilen işlevin listenerasla çağırmayacağını belirtir preventDefault(). Pasif bir dinleyici arama yaparsa preventDefault(), kullanıcı aracısı bir konsol uyarısı oluşturmaktan başka bir şey yapmayacaktır. ...