ساخت کلیک راست اختصاصی با جاوا اسکریپت

بله درست خواندید ! در این مقاله از سری مقالات مدرسه پرنیان، قصد داریم ساخت کلیک راست اختصاصی با جاوا اسکریپت را به شما آموزش دهیم تا در پروژه هایتان از آن استفاده کنید. تا انتها همراه باشید.

مقدمه

بصورت کلی از کلیک راست در پنل ادمین ها و یا وب اپلیکیشن ها بصورت گسترده استفاده میشود. زمانیکه که شما قصد دارید با زدن کلیک راست به کاربرتان امکانات متفات از ویندوز ارایه دهید.

در حالت کلی هم ویژگی ساخت کلیک راست اختصاصی با جاوا اسکریپت میتواند بسیار زیبا و جذاب باشد و از لحاظ بصری شکل پروژه شما را تغییر مثبت دهد.

در این پست هم شکل موس را تغییر داده ایم و هم کلیک راست را ایجاد کرده ایم.

آیا میدانستید کلاس های فرانت اند حرفه ای مدرسه پرنیان، اولین بار بود که تضمین استخدام را در ایران معرفی کرد؟!

کلیک کنید

تغییر شکل موس با جاوا اسکریپت

ابتدا نیاز است یک کد HTML و CSS از قبل نوشته و به آن پوزیشن فیکس دهید. با استفاده از کد جاوا اسکریپت زیر میتوانید هرجایی که موس رفت، آن شکل را بجای موس ببرید و از زیبایی آن استفاده کنید.

  let x = 0
    let y = 0
    let c = document.getElementsByClassName('circle')[0]
    document.getElementsByTagName('main')[0].addEventListener('mousemove', (e)=>{
        console.log(e);
        x = e.clientX
        y = e.clientY
        c.style.opacity='1'
        c.style.top=y+'px'
        c.style.left=x+'px'
    })

همانطور که در کد بالا میبینید، موس پوزیشن از صفحه گرفته شده و به سلکت C داده میشود/

ساخت کلیک راست اختصاصی با جاوا اسکریپت

اما با کد زیر میتوانید جلوی کلیک راست دیفالت بروزر را گرفته و کلیک راست اختصاصی خود را ایجاد نمایید.

let right = document.getElementById('rightClick')
    document.getElementsByTagName('main')[0].addEventListener('contextmenu', (e)=>{
        e.preventDefault()
        console.log(x);
        console.log(y);
        right.style.display='flex'
        right.style.top=y+'px'
        right.style.left=x+'px'
    })
    document.getElementsByTagName('main')[0].addEventListener('click', (e)=>{
        right.style.display='none'
    })

همانطور که در کد بالا میبینید، با کلیک راست منوی اختصاصی ما باز و با کلیک چپ بسته میشود.

میتوانید کد کامل را از لینک زیر دریافت نمایید.

امیدواریم از این مقاله ساخت کلیک راست اختصاصی با جاوا اسکریپت نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.