ظاهر شدن منو با راست کلیک موس (رویداد contextmenu) به دو روش [جاوااسکریپت خالص & جی کویری]
میخواهیم با کلیک راست روی یک آیتم یک منو ظاهر شود. به این رویداد contextmenu میگویند. مانند هر رویداد دیگر است. مثلا رویداد onClick با کلیک چپ موس اجرا میشود درحالیکه اینجا onContextMenu با کلیک راست موس اجرا میشود.
رویداد contextmenu مانند هر رویداد دیگری بصورت اتریبیوت به تگ html اضافه میشود. دو اتریبیوت context و oncontextmenu دارد. مقدار اولی id ای است که در کانتکست منو وجود دارد و دومی مقدارش یک فانکشن است که event را بعنوان ورودی میپذیرد.
ما باید چکار کنیم؟ هدف این است که با یک کلیک راست روی المان مادر, المان بچه (کانتکست منو) نمایان شود. قسمت ساده کار که همه بلدند, تگ های html و css هایی برای آن است. قسمت سخت کار, نوشتن فانکشنی است که در رویداد contextmenu باید اجرا شود.
Github Repositoryتعریف تابع برای رویداد contextmenu
این تابع باید اول اتفاقات پیشفرضی که در این رویداد توسط بروزر انجام میشود را خنثی کند: event.preventDefault
سپس از رویداد event مقدار clientX و clientY که فاصله موس از چپ صفحه و فاصله موس از بالای صفحه را در بر دارند, بگیرد.
با مشخص شدن موقعیت مکانی موس در صفحه میتوانیم مقادیر top و left در css را برای کانتکست منو تعیین کنیم. اگر position:absolute برای کانتکست منو در نظر بگیریم آنگاه منو در همان جایی که موس باشد ظاهر میشود.
از قبل باید display:none بصورت inline css به کانتکست منو وارد شده باشد تا در حالت عادی نمایان نباشد. میخواهیم فقط در حین کلیک راست ظاهر شود و سپس با کلیک روی هر قسمتی دیگر از صفحه دوباره ناپدید شود.
برای اینکه پس از کلیک روی هر قسمت از صفحه ناپدید شود, کافیست یک رویداد کلیک به تگ html اصلی اضافه کنیم. بگوییم هروقت روی هر جایی که داخل تگ <html> بود کلیک شد آنگاه کانتکست منو را display:none کن!
یک روش دیگر
شما میتوانید بجای طی این مراحل با جاوااسکریپت خالص, از جی کویری و متریال دیزاین بوتسترپ استفاده کنید و کمتر کدنویسی کنید. مانند کدهای شاخه jquery همین ریپوسیتوری در گیتهاب.