আমার কাছে একটি ইনপুট ক্ষেত্র রয়েছে যা একটি কাস্টম ড্রপ-ডাউন মেনু নিয়ে আসে। আমি নিম্নলিখিত কার্যকারিতা চাই:
- যখন ব্যবহারকারী ইনপুট ফিল্ডের বাইরে যে কোনও জায়গায় ক্লিক করে, মেনুটি সরানো উচিত।
- যদি আরও নির্দিষ্টভাবে বলা যায়, ব্যবহারকারী মেনুর ভিতরে কোনও ডিভের উপর ক্লিক করেন, মেনুটি সরিয়ে ফেলা উচিত এবং কোন ডিভ ক্লিক করা হয়েছিল তার ভিত্তিতে বিশেষ প্রসেসিং হওয়া উচিত।
আমার বাস্তবায়ন এখানে:
ইনপুট ক্ষেত্রে একটি onblur()ইভেন্ট রয়েছে যা innerHTMLব্যবহারকারীরা যখনই ইনপুট ফিল্ডের বাইরে ক্লিক করে মেনুটি মুছে ফেলবে (তার পিতামাতার একটি খালি স্ট্রিংয়ে সেট করে)। মেনুটির ভিতরে ডিভগুলিও এমন onclick()ইভেন্ট রয়েছে যা বিশেষ প্রক্রিয়াকরণ চালায়।
সমস্যাটি হ'ল onclick()মেনুটি ক্লিক করার পরে ইভেন্টগুলি কখনই আগুন দেয় না, কারণ ইনপুট ফিল্ডের onblur()আগুন জ্বলে ও মেনুটি মুছে দেয়, এস সহ onclick()!
আমি মেনু ডিভ ' onclick()কে onmousedown()এবং onmouseup()ইভেন্টগুলিতে বিভক্ত করে এবং মাউসের উপরে একটি বৈশ্বিক পতাকা সেট করে যা মাউস আপগুলিতে সাফ হয়ে গেছে, এই উত্তরটিতে যা প্রস্তাবিত হয়েছিল তার সমানভাবে সমস্যার সমাধান করেছি । onmousedown()আগে আগুন লাগার কারণে onblur(), onblur()মেনু ডিভগুলির একটিতে ক্লিক করা থাকলে পতাকাটি সেট করা হবে , তবে স্ক্রিনের অন্য কোনও জায়গায় থাকলে তা নয়। যদি মেনুটি ক্লিক করা হয়ে থাকে, আমি onblur()মেনুটি মোছা না করেই ততক্ষণে ফিরে আসি , তারপরে onclick()আগুনের অপেক্ষার জন্য অপেক্ষা করুন , সেই সময়ে আমি মেনুটি নিরাপদে মুছতে পারি।
এর থেকেও কি আরও সুন্দর সমাধান?
কোডটি এরকম কিছু দেখাচ্ছে:
<div class="menu" onmousedown="setFlag()" onmouseup="doProcessing()">...</div>
<input id="input" onblur="removeMenu()" ... />
var mouseflag;
function setFlag() {
mouseflag = true;
}
function removeMenu() {
if (!mouseflag) {
document.getElementById('menu').innerHTML = '';
}
}
function doProcessing(id, name) {
mouseflag = false;
...
}