এই নিবন্ধে, আমরা শিখব কিভাবে CSS ব্যবহার করে ক্লিক ইভেন্ট নিষ্ক্রিয় করা যায়।

সুতরাং শুরু করি!

কিভাবে CSS ব্যবহার করে ক্লিক ইভেন্ট নিষ্ক্রিয় করবেন?

আপনি CSS ব্যবহার করে ক্লিক ইভেন্টগুলি অক্ষম করতে পারেন ' পয়েন্টার-ইভেন্ট 'সম্পত্তি। তবে, এতে ঝাঁপিয়ে পড়ে, আমরা আপনাকে সংক্ষেপে এটি ব্যাখ্যা করব।

'পয়েন্টার-ইভেন্ট' সিএসএস প্রপার্টি কি?

দ্য ' পয়েন্টার-ইভেন্ট ” HTML উপাদানগুলি কীভাবে স্পর্শ ইভেন্টে সাড়া দেয় বা আচরণ করে, যেমন ক্লিক বা ট্যাপ ইভেন্ট, সক্রিয় বা হোভার অবস্থা এবং কার্সার দৃশ্যমান কিনা তা নিয়ন্ত্রণ করে।

বাক্য গঠন
পয়েন্টার-ইভেন্টের সিনট্যাক্স নিম্নরূপ:

উপরে উল্লিখিত সম্পত্তি দুটি মান নেয়, যেমন ' স্বয়ংক্রিয় ' এবং ' কোনটি ”:

• স্বয়ংক্রিয়: এটি ডিফল্ট ইভেন্টগুলি সম্পাদন করতে ব্যবহৃত হয়।
• কোনোটিই না ইভেন্ট নিষ্ক্রিয় করতে এটি ব্যবহার করা হয়।

দ্রষ্টব্য: নীচের উদাহরণটি প্রথমে প্রদর্শন করবে কিভাবে দুটি সক্রিয় বোতাম যোগ করতে হয়, এবং তারপরে আমরা দ্বিতীয় বোতামের ক্লিক ইভেন্টটি নিষ্ক্রিয় করব।

উদাহরণ 1: CSS ব্যবহার করে বোতামের ক্লিক ইভেন্ট নিষ্ক্রিয় করা
এই উদাহরণে, আমরা একটি শিরোনাম

এবং দুটি বোতাম তৈরি করব। পরবর্তী, নির্দিষ্ট করুন ' বোতাম 'প্রথম বোতামের ক্লাসের নাম হিসাবে, এবং বরাদ্দ করুন' বোতাম ' এবং ' বোতাম2 ” দ্বিতীয় বোতামের ক্লাস হিসাবে।

এইচটিএমএল

< div >
< h1 > CSS ব্যবহার করে ক্লিক ইভেন্ট নিষ্ক্রিয় করুন < / h1 >
< বোতাম ক্লাস = 'বোতাম' > বোতাম সক্ষম করুন < / বোতাম >
< বোতাম ক্লাস = 'বোতাম বাটন2' > নিষ্ক্রিয় বোতাম < / বোতাম >
< / div >

সিএসএস-এ, ' .বোতাম ” HTML ফাইলে তৈরি উভয় বোতাম অ্যাক্সেস করতে ব্যবহৃত হয়। এর পরে, সীমানা শৈলী হিসাবে সেট করুন “ কোনটি 'এবং প্যাডিং দিন' হিসাবে 25px ” এর পরে, বোতাম পাঠ্যের রঙ হিসাবে সেট করুন “ rgb(২৯, ৬, ৩১) ' এবং বোতামের পটভূমি ' হিসাবে rgb(19, 192, 163) ” আমরা একটি বোতামের ব্যাসার্ধও সেট করব “ 5px ”

সিএসএস

.বোতাম {
সীমান্ত : কোনটি ;
প্যাডিং : 25px ;
রঙ : rgb ( 29 , 6 , 31 ) ;
পেছনের রং : rgb ( 19 , 192 , 163 ) ;
সীমানা-ব্যাসার্ধ : 5px ;
}

এর পরে, আমরা উভয় বোতামে :active pseudo-class প্রয়োগ করব “ বোতাম: সক্রিয় ' এবং বোতামের রঙ ' হিসাবে সেট করুন rgb(200, 255, 0) ”:

.বোতাম : সক্রিয় {
পেছনের রং : rgb ( 209 , 65 , 65 ) ;
}

ফলস্বরূপ, আপনি নিম্নলিখিত ফলাফল দেখতে পাবেন:

এখন, আমরা পরবর্তী অংশে চলে যাব যেখানে আমরা দ্বিতীয় বোতামের জন্য ক্লিক ইভেন্টটি নিষ্ক্রিয় করব।

এটি করতে, ব্যবহার করুন ' .বোতাম2 ” এইচটিএমএল ফাইলে তৈরি দ্বিতীয় বোতামটি অ্যাক্সেস করতে এবং তার পরে, পয়েন্টার-ইভেন্ট সম্পত্তির মান হিসাবে সেট করুন “ কোনটি ”:

.বোতাম2 {
পয়েন্টার-ইভেন্ট : কোনটি ;
}

পয়েন্টার-ইভেন্ট প্রপার্টি ব্যবহার করা এবং এর মান অ-এ সেট করা ক্লিক ইভেন্টটিকে নিষ্ক্রিয় করবে, যা নিম্নলিখিত আউটপুটে দেখা যাবে:

আমরা CSS ব্যবহার করে ক্লিক ইভেন্ট নিষ্ক্রিয় করার জন্য সবচেয়ে সহজ পদ্ধতি প্রদান করেছি।

উপসংহার

HTML এ ক্লিক ইভেন্ট নিষ্ক্রিয় করতে, ' পয়েন্টার-ইভেন্ট ” CSS এর প্রপার্টি ব্যবহার করা হয়। এই উদ্দেশ্যে, একটি এইচটিএমএল উপাদান যোগ করুন এবং পয়েন্টার-ইভেন্ট সম্পত্তির মান হিসাবে সেট করুন “ কোনটি ” এর ক্লিক ইভেন্ট নিষ্ক্রিয় করতে। এই নিবন্ধটি ব্যাখ্যা করেছে যে কীভাবে CSS ব্যবহার করে ক্লিক ইভেন্টটি তার উদাহরণ সহ অক্ষম করা যায়।