نحوه تشخیص کلیک شدن خارج از المنت در Javascript



visibility  
mode_comment   ۰

نحوه تشخیص کلیک شدن خارج از المنت در Javascript

در این مطلب میخوام روش تشخیص کلیک شدن خارج از المنت با استفاده از Javascript رو بهتون آموزش بدم. شاید زیاد تا بحال براتون پیش اومده باشه که بخواید زمانی که خارج از یک المنت کلیک میشه، کار خاصی انجام بشه.

مثلا فرض کنید که یک منو داریم و میخوایم با کلیک شدن بر روی هر جای دیگه از صفحه، منو بسته بشه. برای اینکار میتونیم از Javascript استفاده کنیم. فرض کنید که کد HTML زیر رو داریم:

میبینید که یک div با کلاس inner در داخل یک div با کلاس outer قرار گرفته است. حالا میخوایم کاری کنیم که وقتی بر روی هر چیزی جز المنت inner کلیک شد، این المنت مخفی بشه. برای اینکار میتونین از تابع زیر استفاده کنید و بدردتون میخوره:

همونطور که میبینید یک تابع بنام hideOnClickOutside ساختیم و یک المنت رو به عنوان ورودی میگیره و وقتی که خارج از اون کلیک میشه، متوجه میشه و اون رو مخفی میکنه. حالا به راحتی میتونیم از این تابع استفاده کنیم. برای اینکار بصورت زیر عمل میکنیم:

همونطور که میبینید در ابتدا با استفاده از querySelector المنت inner رو انتخاب کردیم و بعد از اون تابع hideOnClickOutside رو فراخوانی کردیم و المنت رو به اون پاس دادیم. حالا اگر کد رو اجرا کنید و خارج از المنت inner کلیک کنید، میبینید که المنت مخفی میشه.

پس میتونین در موارد این چنینی از این تابع استفاده کنید.

اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.