ব্যবহারকারীদের ব্রাউজারে তীর কী স্ক্রোলিং অক্ষম করুন

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

তথ্যসূত্র

এমডিএন: window.addEventListener
এমডিএন: window.removeEventListener

Question 3

রক্ষণাবেক্ষণের জন্য, আমি নিজেই উপাদানটিতে "ব্লকিং" হ্যান্ডলার সংযুক্ত করব (আপনার ক্ষেত্রে, ক্যানভাসে)।

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

কেন সহজভাবে না window.event.preventDefault()? এমডিএন বলে:

window.eventএকটি স্বত্বাধিকারী মাইক্রোসফ্ট ইন্টারনেট এক্সপ্লোরার সম্পত্তি যা কেবলমাত্র যখন ডম ইভেন্ট ইভেন্ট হ্যান্ডলারকে ডাকা হওয়ার সময় উপলব্ধ থাকে। এর মান হ'ল ইভেন্ট হ্যান্ডেলটি বর্তমানে পরিচালিত হচ্ছে।

আরও পড়া:

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() থেকে উদ্ধৃতি

বিকল্প Oচ্ছিক
   একটি বিকল্প বস্তু ইভেন্ট শ্রোতার সম্পর্কে বৈশিষ্ট্য নির্দিষ্ট করে specif উপলভ্য বিকল্পগুলি হ'ল:

ক্যাপচার
   একটি Booleanনির্দেশ করে যে এই ধরণের ঘটনাগুলি ডোম গাছের নীচে listenerযে কোনও স্থানে প্রেরণের আগে নিবন্ধভুক্তকে প্রেরণ করা EventTargetহবে।
একবার
   ...
প্যাসিভ
   এ, Booleanযা সত্য হয় তা নির্দেশ করে যে দ্বারা নির্দিষ্ট করা ফাংশনটি listenerকখনই কল করবে না preventDefault()। যদি কোনও প্যাসিভ শ্রোতারা কল করেন preventDefault(), ব্যবহারকারী এজেন্ট কনসোল সতর্কতা তৈরি করা ছাড়া আর কিছুই করবে না। ...