JavaScript-এ একটি এলিমেন্টের বাইরে ক্লিক ডিটেক্ট করার পদ্ধতি

JavaScript-এ একটি এলিমেন্টের বাইরে ক্লিক ডিটেক্ট করার পদ্ধতি শিখना একটি শক্তিশালী স্কিল যা আপনি অনেক পরিস্থিতিতে ব্যবহার করতে পারেন, যেমন মেনু বা মডাল উইন্ডো লুকাতে। কয়েক মিনিটে আপনি জানবেন কীভাবে।

বেসিক JavaScript আউটসাইড এলিমেন্ট ডিটেকশন

HTML-এ একটি বক্স এলিমেন্ট তৈরি করুন:

<div class="box"> If you click anywhere outside of me, I’m gone faster than you can snap your fingers. </div>

বক্সটি CSS দিয়ে স্টাইল করুন এবং একটি হাইড এলিমেন্ট ইউটিলিটি ক্লাস: তৈরি করুন:

.box { margin: 1rem auto 1rem auto; max-width: 300px; border: 1px solid #555; border-radius: 4px; padding: 1rem 1.5rem; font-size: 1.5rem; } .js-is-hidden { display: none; }

এবং JavaScript ক্লিক ডিটেকশন স্ক্রিপ্ট:

// box ক্লাসের এলিমেন্ট সিলেক্ট করুন, box ভেরিয়েবলে অ্যাসাইন করুন const box = document.querySelector(".box") // ডকুমেন্টে সব ক্লিক ডিটেক্ট করুন document.addEventListener("click", function(event) { // যদি ইউজার এলিমেন্টের ভিতরে ক্লিক করে, কিছুই করবেন না if (event.target.closest(".box")) return // যদি ইউজার এলিমেন্টের বাইরে ক্লিক করে, সেটি হাইড করুন! box.classList.add("js-is-hidden") })

এখানে সকল কোডসহ CodePen আছে।

JavaScript কোডটি কীভাবে কাজ করে:

প্রথমে, আমরা querySelector() দিয়ে বক্স এলিমেন্টটি খুঁজে বের করি এবং box নামে একটি ভেরিয়েবলে অ্যাসাইন করি
তারপর আমরা ডকুমেন্টে addEventListener() আটাচ করি এবং বলে দেই পুরো পেজে ক্লিক লিসেন করতে।
যখন ইউজার ডকুমেন্টে ক্লিক করে, তবে function() একটি কন্ডিশনাল স্টেটমেন্ট শুরু করে এর কোড ব্লক { .. } এর ভিতরে:
যদি ইউজার বক্স এলিমেন্টের ভিতরে ক্লিক করে (event.target.closest), তবে কিছুই করবেন না (সেটিই return; অংশ)।
কিন্তু যদি তারা বক্স এলিমেন্টের বাইরে ক্লিক করে, তবে আমরা সেটি হাইড করি classList.add মেথড ব্যবহার করে .js-is-hidden CSS ক্লাস (যে display: none প্রোপার্টি সহ) যোগ করুন যা আমরা আগে তৈরি করেছিলাম।

এখন আপনি জানেন কীভাবে এলিমেন্টের বাইরে ক্লিক ডিটেক্ট করতে হয়!

উপসংহার

ভবিষ্যতের টিউটোরিয়ালে, আমরা ক্লিক ডিটেকশন আরও গভীরে এক্সপ্লোর করব, একটি প্র্যাক্টিক্যাল ওয়েব কম্পোনেন্ট তৈরি করে যা আপনি বাস্তব প্রজেক্টে ব্যবহার করতে পারেন। আমরা পপআপ মডাল উইন্ডোতে, অথবা স্লাইড-ইন, স্লাইড-আউট মেনুতে ক্লিক ডিটেকশন ইন্টিগ্রেট করতে পারি?