আমি যখন একটি পৃষ্ঠা ( id=menu_content
) বাদে আমার পৃষ্ঠায় যে কোনও জায়গায় ক্লিক করি তখন কীভাবে কোনও ফাংশন ট্রিগার করতে পারি ?
আমি যখন একটি পৃষ্ঠা ( id=menu_content
) বাদে আমার পৃষ্ঠায় যে কোনও জায়গায় ক্লিক করি তখন কীভাবে কোনও ফাংশন ট্রিগার করতে পারি ?
উত্তর:
আপনি নথির click
উপর আবেদন করতে পারেন এবং ইভেন্টটি আইডির সাথে ডিভ দ্বারা উত্পাদিত হলে প্রক্রিয়াজাতকরণ body
বাতিল করতে পারেন , এটি ইভেন্টটিকে একক উপাদানের সাথে আবদ্ধ করবে এবং প্রতিটি উপাদানের সাথে বাইন্ডিং সাশ্রয় ব্যতীতclick
click
menu_content
click
menu_content
$('body').click(function(evt){
if(evt.target.id == "menu_content")
return;
//For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
if($(evt.target).closest('#menu_content').length)
return;
//Do processing of click event here for every element except with id menu_content
});
closest
বর্তমান উপাদানটি দিয়ে শুরু হয়, এটি ক্লিক করা menu_content
পাশাপাশি বংশধরদের উপরও ক্লিক করে। আমি মনে করি দ্বিতীয়টি if
আপনার যা প্রয়োজন তা হল।
JQuery ইভেন্ট টার্গেটের জন্য ডকুমেন্টেশন দেখুন । ইভেন্ট অবজেক্টের টার্গেট প্রপার্টি ব্যবহার করে আপনি সনাক্ত করতে পারবেন যে ক্লিকটি #menu_content
এলিমেন্টের মধ্যে কোথা থেকে উদ্ভূত হয়েছিল এবং যদি তাই হয় তবে তাড়াতাড়ি ক্লিক হ্যান্ডলারটি বন্ধ করুন। .closest()
ক্লিকগুলি যে কোনও বংশধর থেকে উদ্ভূত সেখানে পরিচালনা করতে আপনাকে ব্যবহার করতে হবে #menu_content
।
$(document).click(function(e){
// Check if click was triggered on or within #menu_content
if( $(e.target).closest("#menu_content").length > 0 ) {
return false;
}
// Otherwise
// trigger your click function
});
এটা চেষ্টা কর
$('html').click(function() {
//your stuf
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
আপনি বাইরের ইভেন্টগুলিও ব্যবহার করতে পারেন
আমি জানি যে এই প্রশ্নের উত্তর দেওয়া হয়েছে, এবং সমস্ত উত্তর সুন্দর। তবে আমি এই প্রশ্নে আমার দুটি সেন্ট যুক্ত করতে চেয়েছিলাম যাদের সমস্যাগুলির সমান (তবে ঠিক একই নয়)।
আরও সাধারণ উপায়ে আমরা এরকম কিছু করতে পারি:
$('body').click(function(evt){
if(!$(evt.target).is('#menu_content')) {
//event handling code
}
});
এইভাবে আমরা কেবল আইডি সহ উপাদান ছাড়া অন্য কিছু দ্বারা চালিত ইভেন্টগুলিকেই হ্যান্ডেল করতে পারি না menu_content
বরং সিএসএস নির্বাচক ব্যবহার করে যে উপাদান নির্বাচন করতে পারি তা বাদ দিয়ে যে কোনও উপাদান দ্বারা বরখাস্ত করা ইভেন্টগুলিও আমরা পরিচালনা করতে পারি।
উদাহরণস্বরূপ নীচের কোড স্নিপেটে আমি <li>
আইডি সহ ডিভ উপাদানটির বংশধর ছাড়া সমস্ত উপাদান ব্যতীত যে কোনও উপাদান দ্বারা ঘটনাগুলি সরিয়ে আছি myNavbar
।
$('body').click(function(evt){
if(!$(evt.target).is('div#myNavbar li')) {
//event handling code
}
});
এখানে আমি কি করেছি। আমি নিশ্চিত করতে চেয়েছিলাম যে আমি আমার ডেটপিকারে যে কোনও শিশুকে এটি বন্ধ না করে ক্লিক করতে পারি।
$('html').click(function(e){
if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
// clicked menu content or children
} else {
// didnt click menu content
}
});
আমার আসল কোড:
$('html').click(function(e){
if (e.target.id != 'datepicker'
&& $(e.target).parents('#datepicker').length == 0
&& !$(e.target).hasClass('datepicker')
) {
$('#datepicker').remove();
}
});