জাভাস্ক্রিপ্টের সাহায্যে একটি উপাদানের বাইরে ক্লিকগুলি কীভাবে সনাক্ত করা যায়

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

মূল জাভাস্ক্রিপ্ট বাইরের উপাদান সনাক্তকরণ

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 ক্লিক সনাক্তকরণ স্ক্রিপ্ট:

// Select element with box class, assign to box variable
const box = document.querySelector(".box")
// Detect all clicks on the document
document.addEventListener("click", function(event) {
  // If user clicks inside the element, do nothing
  if (event.target.closest(".box")) return
  // If user clicks outside the element, hide it!
  box.classList.add("js-is-hidden")
})

এখানে সমস্ত কোড সহ একটি কোডপেন রয়েছে৷

জাভাস্ক্রিপ্ট কোড কিভাবে কাজ করে:

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

এখন আপনি জানেন কিভাবে উপাদানের বাইরে ক্লিক সনাক্ত করতে হয়!

র্যাপিং আপ

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