उपयोगकर्ता ब्राउज़र में तीर कुंजी स्क्रॉल अक्षम करें

Question 1

मैं कैनवास, और जावास्क्रिप्ट का उपयोग कर एक खेल बना रहा हूं।

जब पृष्ठ स्क्रीन (टिप्पणियाँ, आदि) से अधिक लंबा होता है, तो नीचे तीर दबाकर पृष्ठ को नीचे स्क्रॉल किया जाता है, और खेल को खेलना असंभव बना देता है।

जब खिलाड़ी बस नीचे जाना चाहता है तो मैं विंडो को स्क्रॉल करने से रोकने के लिए क्या कर सकता हूं?

मैं जावा गेम के साथ अनुमान लगाता हूं, और इस तरह, यह कोई समस्या नहीं है, जब तक उपयोगकर्ता खेल पर क्लिक करता है।

मैंने इससे समाधान की कोशिश की: एफएफ में तीर स्क्रॉलिंग के साथ पेज स्क्रॉलिंग को कैसे अक्षम किया जाए , लेकिन मैं इसे काम नहीं कर सका।

Question 2

सारांश

बस डिफ़ॉल्ट ब्राउज़र कार्रवाई को रोकें :

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

मूल उत्तर

मैंने अपने गेम में निम्न फ़ंक्शन का उपयोग किया:

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);

में जादू होता है e.preventDefault();। यह घटना की डिफ़ॉल्ट कार्रवाई को अवरुद्ध करेगा, इस मामले में ब्राउज़र के दृष्टिकोण को आगे बढ़ाएगा।

यदि आपको वर्तमान बटन की आवश्यकता नहीं है, तो आप बस छोड़ सकते हैं keysऔर तीर कुंजियों पर डिफ़ॉल्ट कार्रवाई को छोड़ सकते हैं :

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);

ध्यान दें कि यह दृष्टिकोण आपको बाद में ईवेंट हैंडलर को निकालने में सक्षम बनाता है यदि आपको तीर कुंजी स्क्रॉलिंग को फिर से सक्षम करने की आवश्यकता है:

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

संदर्भ

MDN: window.addEventListener
MDN: window.removeEventListener

Question 3

स्थिरता के लिए, मैं तत्व पर "अवरुद्ध" हैंडलर को संलग्न करूंगा (आपके मामले में, कैनवास)।

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

बस क्यों नहीं करते window.event.preventDefault()? MDN बताता है:

window.eventएक मालिकाना Microsoft इंटरनेट एक्सप्लोरर संपत्ति है जो केवल तब उपलब्ध है जबकि DOM ईवेंट हैंडलर कहा जा रहा है। इसका मूल्य वर्तमान में संभाला जा रहा ईवेंट ऑब्जेक्ट है।

आगे की रीडिंग:

Question 4

मैंने स्क्रॉलिंग को ब्लॉक करने के विभिन्न तरीकों की कोशिश की है जब तीर कुंजी दबाया जाता है, दोनों jQuery और देशी जावास्क्रिप्ट - वे सभी फ़ायरफ़ॉक्स में ठीक काम करते हैं, लेकिन क्रोम के हाल के संस्करणों में काम नहीं करते हैं।
यहां तक कि स्पष्ट {passive: false}संपत्ति के लिए window.addEventListener, जिसे केवल कार्यशील समाधान के रूप में अनुशंसित किया जाता है, उदाहरण के लिए यहां ।

अंत में, कई कोशिशों के बाद, मुझे एक ऐसा तरीका मिला जो फ़ायरफ़ॉक्स और क्रोम दोनों में मेरे लिए काम करता है:

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
});

एमडीएनEventTarget.addEventListener() से बोली

विकल्प वैकल्पिक
   एक विकल्प वस्तु घटना श्रोता के बारे में विशेषताओं को निर्दिष्ट करती है। उपलब्ध विकल्प हैं:

कैप्चर
   ए Booleanयह दर्शाता है कि इस प्रकार की घटनाओं को डोम ट्री में listenerकिसी भी EventTargetनीचे भेजे जाने से पहले पंजीकृत को भेज दिया जाएगा ।
एक बार
   ...
निष्क्रिय
   ए Booleanकि, अगर सच है, इंगित करता है कि द्वारा निर्दिष्ट फ़ंक्शन listenerकभी कॉल नहीं करेगा preventDefault()। यदि कोई निष्क्रिय श्रोता कॉल करता है preventDefault(), तो उपयोगकर्ता एजेंट कंसोल चेतावनी उत्पन्न करने के अलावा और कुछ नहीं करेगा। ...