பாயிண்டர் நிகழ்வுகள் API: உள்ளீட்டு சாதனக் கையாளுதலுக்கான ஒரு ஒருங்கிணைந்த அணுகுமுறை

தொடர்ந்து மாறிவரும் வலை மேம்பாட்டு உலகில், எண்ணற்ற சாதனங்களில் தடையற்ற பயனர் அனுபவங்களை உறுதி செய்வது மிக முக்கியம். பாயிண்டர் நிகழ்வுகள் API ஒரு சக்திவாய்ந்த தீர்வாக உருவெடுத்துள்ளது, இது மவுஸ், டச்ஸ்கிரீன் மற்றும் பேனா உள்ளிட்ட பல்வேறு சாதனங்களிலிருந்து உள்ளீட்டைக் கையாள்வதற்கான ஒரு ஒருங்கிணைந்த அணுகுமுறையை வழங்குகிறது. இந்த API மேம்பாட்டு செயல்முறையை எளிதாக்குகிறது மற்றும் பல-சாதன இணக்கத்தன்மையை மேம்படுத்துகிறது, இது நவீன வலை உருவாக்குநர்களுக்கு ஒரு அவசியமான கருவியாக அமைகிறது.

ஒருங்கிணைந்த API-யின் தேவையைப் புரிந்துகொள்ளுதல்

பாரம்பரியமாக, வலை உருவாக்குநர்கள் மவுஸ், டச் மற்றும் பேனா தொடர்புகளுக்கு தனித்தனி நிகழ்வு கேட்பான்களை (event listeners) நம்பியிருக்க வேண்டியிருந்தது. இந்த அணுகுமுறை பெரும்பாலும் குறியீடு நகலெடுப்பு, அதிகரித்த சிக்கல் மற்றும் வெவ்வேறு தளங்களில் பயனர் அனுபவத்தில் சாத்தியமான முரண்பாடுகளுக்கு வழிவகுத்தது. பாயிண்டர் நிகழ்வுகள் API அனைத்து வகையான பாயிண்டர் உள்ளீடுகளையும் பிரதிநிதித்துவப்படுத்தும் ஒரு நிகழ்வுகளின் தொகுப்பை வழங்குவதன் மூலம் இந்த சவால்களை எதிர்கொள்கிறது.

நீங்கள் ஒரு வரைதல் பயன்பாட்டை உருவாக்கும் ஒரு சூழ்நிலையை கற்பனை செய்து பாருங்கள். பாயிண்டர் நிகழ்வுகள் API இல்லாமல், மவுஸ் கிளிக்குகள் மற்றும் இழுத்தல், டச் சைகைகள் மற்றும் பேனா கீறல்களுக்கு தனித்தனி நிகழ்வு கையாளுபவர்களை (event handlers) செயல்படுத்த வேண்டும். இது தேவையற்ற குறியீட்டிற்கு வழிவகுக்கிறது மற்றும் அனைத்து உள்ளீட்டு முறைகளிலும் நிலையான நடத்தையை உறுதி செய்வதை கடினமாக்குகிறது. பாயிண்டர் நிகழ்வுகள் API இந்த அனைத்து தொடர்புகளையும் ஒரே நிகழ்வு கேட்பான்கள் தொகுப்புடன் கையாள உங்களை அனுமதிக்கிறது, இது உங்கள் குறியீட்டை நெறிப்படுத்துகிறது மற்றும் பராமரிப்பை மேம்படுத்துகிறது.

பாயிண்டர் நிகழ்வுகள் என்றால் என்ன?

பாயிண்டர் நிகழ்வுகள், சுட்டிக்காட்டும் சாதனங்களிலிருந்து வரும் உள்ளீடுகளைக் கையாள ஒரு வன்பொருள்-சாரா வழியைப் பிரதிநிதித்துவப்படுத்துகின்றன. அவை ஒவ்வொரு சாதனத்தின் தனித்தன்மைகளையும் தவிர்த்து, உருவாக்குநர்கள் வேலை செய்ய ஒரு நிலையான இடைமுகத்தை வழங்குகின்றன. ஒரு "பாயிண்டர்" என்பது மவுஸ் கர்சர், டச்ஸ்கிரீனைத் தொடும் விரல் அல்லது டிஜிட்டல் டேப்லெட்டின் மேல் இருக்கும் பேனாவாக இருக்கலாம்.

இதன் முக்கிய கருத்து என்னவென்றால், உள்ளீட்டு சாதனம் எதுவாக இருந்தாலும், ஒரே மாதிரியான நிகழ்வுகள் தூண்டப்படும், இது உருவாக்குநர்கள் அனைத்து தளங்களிலும் சீராக செயல்படும் குறியீட்டை எழுத அனுமதிக்கிறது. இது மேம்பாட்டு செயல்முறையை கணிசமாக எளிதாக்குகிறது மற்றும் பல-சாதன இணக்கத்தன்மை சிக்கல்களின் சாத்தியக்கூறுகளைக் குறைக்கிறது.

பாயிண்டர் நிகழ்வுகள் API-ஐப் பயன்படுத்துவதன் முக்கிய நன்மைகள்

• ஒருங்கிணைந்த உள்ளீட்டுக் கையாளுதல்: அனைத்து சுட்டிக்காட்டும் சாதனங்களுக்கும் ஒரே நிகழ்வுகளின் தொகுப்பை வழங்குவதன் மூலம் குறியீட்டை எளிதாக்குகிறது.
• மேம்படுத்தப்பட்ட பல-சாதன இணக்கத்தன்மை: டெஸ்க்டாப்கள், டேப்லெட்டுகள் மற்றும் ஸ்மார்ட்போன்களில் நிலையான பயனர் அனுபவங்களை உறுதி செய்கிறது.
• குறைக்கப்பட்ட குறியீடு நகலெடுப்பு: வெவ்வேறு உள்ளீட்டு முறைகளுக்கு தனித்தனி நிகழ்வு கையாளுபவர்களை எழுத வேண்டிய தேவையை நீக்குகிறது.
• மேம்படுத்தப்பட்ட பராமரிப்பு: குறியீட்டைப் புரிந்துகொள்வதற்கும், பிழைதிருத்துவதற்கும், புதுப்பிப்பதற்கும் எளிதாக்குகிறது.
• எதிர்காலத்திற்கு ஏற்றது: புதிய உள்ளீட்டு சாதனங்கள் மற்றும் தொடர்பு மாதிரிகளுக்கு ஏற்ப மாற்றியமைக்கக்கூடிய ஒரு நெகிழ்வான கட்டமைப்பை வழங்குகிறது.

முக்கிய பாயிண்டர் நிகழ்வு வகைகள்

பாயிண்டர் நிகழ்வுகள் API, பாயிண்டர் தொடர்புகளின் வெவ்வேறு நிலைகளைப் பிரதிநிதித்துவப்படுத்தும் நிகழ்வு வகைகளின் தொகுப்பை வரையறுக்கிறது:

• pointerdown: ஒரு பாயிண்டர் செயலில் இருக்கும்போது தூண்டப்படுகிறது. இது பொதுவாக பயனர் மவுஸ் பொத்தானை அழுத்தும்போது, டச்ஸ்கிரீனைத் தொடும்போது அல்லது ஒரு பேனாவை டேப்லெட்டுடன் தொடர்பு கொள்ளும்போது நிகழ்கிறது.
• pointermove: ஒரு பாயிண்டர் செயலில் இருக்கும்போது நகரும்போது தூண்டப்படுகிறது. இது ஒரு பொத்தானை அழுத்தியபடி மவுஸை நகர்த்துவது, டச்ஸ்கிரீனில் விரலை இழுப்பது அல்லது ஒரு பேனாவை டேப்லெட்டில் தொட்டபடி நகர்த்துவது ஆகியவற்றுடன் தொடர்புடையது.
• pointerup: ஒரு பாயிண்டர் செயலற்றதாக மாறும்போது தூண்டப்படுகிறது. இது பயனர் மவுஸ் பொத்தானை விடுவிக்கும்போது, டச்ஸ்கிரீனிலிருந்து விரலை எடுக்கும்போது அல்லது டேப்லெட்டிலிருந்து பேனாவை எடுக்கும்போது நடக்கிறது.
• pointercancel: ஒரு பாயிண்டர் ரத்து செய்யப்படும்போது தூண்டப்படுகிறது. இது பயனரின் விரல் டச்ஸ்கிரீனிலிருந்து நழுவினால், உலாவி தற்செயலான தொடுதலைக் கண்டறிந்தால் அல்லது மற்றொரு நிகழ்வு பாயிண்டர் தொடர்பைக் குறுக்கிட்டால் ஏற்படலாம்.
• pointerover: ஒரு பாயிண்டர் ஒரு எலிமென்ட்டின் மீது நகர்த்தப்படும்போது தூண்டப்படுகிறது. இது `mouseover` நிகழ்வைப் போன்றது, ஆனால் இது அனைத்து பாயிண்டர் வகைகளுக்கும் பொருந்தும்.
• pointerout: ஒரு பாயிண்டர் ஒரு எலிமென்ட்டிலிருந்து வெளியே நகர்த்தப்படும்போது தூண்டப்படுகிறது. இது `mouseout` நிகழ்வைப் போன்றது, ஆனால் இது அனைத்து பாயிண்டர் வகைகளுக்கும் பொருந்தும்.
• pointerenter: ஒரு பாயிண்டர் ஒரு எலிமென்ட்டின் எல்லைக்குள் நுழையும்போது தூண்டப்படுகிறது. இந்த நிகழ்வு பாயிண்டர் ஆரம்பத்தில் எலிமென்ட்டிற்குள் நுழையும்போது ஒருமுறை மட்டுமே தூண்டப்படும், `pointerover` போலல்லாமல், அது பலமுறை தூண்டப்படலாம்.
• pointerleave: ஒரு பாயிண்டர் ஒரு எலிமென்ட்டின் எல்லைகளை விட்டு வெளியேறும்போது தூண்டப்படுகிறது. இந்த நிகழ்வு பாயிண்டர் எலிமென்ட்டை விட்டு வெளியேறும்போது ஒருமுறை மட்டுமே தூண்டப்படும், `pointerout` போலல்லாமல், அது பலமுறை தூண்டப்படலாம்.
• gotpointercapture: ஒரு எலிமென்ட் ஒரு பாயிண்டரைப் பிடிக்கும்போது தூண்டப்படுகிறது. இது பாயிண்டர் அதன் எல்லைகளுக்கு வெளியே நகர்ந்தாலும், அந்த எலிமென்ட் அடுத்தடுத்த அனைத்து பாயிண்டர் நிகழ்வுகளையும் பெற அனுமதிக்கிறது.
• lostpointercapture: ஒரு எலிமென்ட் ஒரு பாயிண்டர் பிடிப்பை இழக்கும்போது தூண்டப்படுகிறது. இது எலிமென்ட் பிடிப்பை விடுவித்தால், பாயிண்டர் ரத்து செய்யப்பட்டால் அல்லது பயனர் மற்றொரு எலிமென்ட்டுடன் தொடர்பு கொண்டால் நிகழலாம்.

பாயிண்டர் நிகழ்வு பண்புகள்

ஒவ்வொரு பாயிண்டர் நிகழ்வு பொருளும் பாயிண்டர் தொடர்பு பற்றிய தகவல்களை வழங்கும் பண்புகளைக் கொண்டுள்ளது, அவை:

• pointerId: பாயிண்டருக்கான ஒரு தனித்துவமான அடையாளங்காட்டி. பல பாயிண்டர்கள் செயலில் இருக்கும்போது (எ.கா., மல்டி-டச் சைகைகள்) தனிப்பட்ட பாயிண்டர்களைக் கண்காணிக்க இது உங்களை அனுமதிக்கிறது.
• pointerType: பாயிண்டரின் வகையைக் குறிக்கிறது, அதாவது "mouse", "touch", அல்லது "pen".
• isPrimary: பாயிண்டர் முதன்மை பாயிண்டரா என்பதைக் குறிக்கும் ஒரு பூலியன் மதிப்பு. எடுத்துக்காட்டாக, டச்ஸ்கிரீனைத் தொடும் முதல் விரல் பொதுவாக முதன்மை பாயிண்டராகக் கருதப்படுகிறது.
• clientX: வியூபோர்ட்டைப் பொறுத்து பாயிண்டரின் கிடைமட்ட ஒருங்கிணைப்பு.
• clientY: வியூபோர்ட்டைப் பொறுத்து பாயிண்டரின் செங்குத்து ஒருங்கிணைப்பு.
• screenX: திரையைப் பொறுத்து பாயிண்டரின் கிடைமட்ட ஒருங்கிணைப்பு.
• screenY: திரையைப் பொறுத்து பாயிண்டரின் செங்குத்து ஒருங்கிணைப்பு.
• pageX: முழு ஆவணத்தையும் பொறுத்து பாயிண்டரின் கிடைமட்ட ஒருங்கிணைப்பு.
• pageY: முழு ஆவணத்தையும் பொறுத்து பாயிண்டரின் செங்குத்து ஒருங்கிணைப்பு.
• offsetX: இலக்கு எலிமென்ட்டைப் பொறுத்து பாயிண்டரின் கிடைமட்ட ஒருங்கிணைப்பு.
• offsetY: இலக்கு எலிமென்ட்டைப் பொறுத்து பாயிண்டரின் செங்குத்து ஒருங்கிணைப்பு.
• width: பாயிண்டரின் தொடர்பு வடிவவியலின் அகலம்.
• height: பாயிண்டரின் தொடர்பு வடிவவியலின் உயரம்.
• pressure: பாயிண்டரின் இயல்பாக்கப்பட்ட அழுத்தம். இந்த மதிப்பு 0 முதல் 1 வரை இருக்கும், இதில் 1 அதிகபட்ச அழுத்தத்தைக் குறிக்கிறது. இது பொதுவாக பேனாக்களுடன் பயன்படுத்தப்படுகிறது.
• tiltX: X அச்சில் பாயிண்டரின் சாய்வு கோணம், டிகிரிகளில்.
• tiltY: Y அச்சில் பாயிண்டரின் சாய்வு கோணம், டிகிரிகளில்.
• twist: பாயிண்டரின் கடிகார திசை சுழற்சி, டிகிரிகளில்.
• button: எந்த மவுஸ் பொத்தான் அழுத்தப்பட்டது என்பதைக் குறிக்கிறது.
• buttons: தற்போது எந்த மவுஸ் பொத்தான்கள் அழுத்தப்பட்டுள்ளன என்பதைக் குறிக்கும் ஒரு பிட்மாஸ்க்.

பாயிண்டர் நிகழ்வுகள் API-ஐப் பயன்படுத்துவதற்கான நடைமுறை எடுத்துக்காட்டுகள்

வலை மேம்பாட்டில் பாயிண்டர் நிகழ்வுகள் API-ஐ எவ்வாறு பயன்படுத்துவது என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளை ஆராய்வோம்.

எடுத்துக்காட்டு 1: எளிய இழுத்து விடுதல் (Drag and Drop)

இந்த எடுத்துக்காட்டு பாயிண்டர் நிகழ்வுகள் API-ஐப் பயன்படுத்தி ஒரு எளிய இழுத்து விடும் செயல்பாட்டை எவ்வாறு செயல்படுத்துவது என்பதைக் காட்டுகிறது.

            
const element = document.getElementById('draggable-element');
let isDragging = false;
let offsetX, offsetY;

element.addEventListener('pointerdown', (event) => {
  isDragging = true;
  offsetX = event.clientX - element.offsetLeft;
  offsetY = event.clientY - element.offsetTop;
  element.setPointerCapture(event.pointerId);
});

document.addEventListener('pointermove', (event) => {
  if (!isDragging) return;
  element.style.left = event.clientX - offsetX + 'px';
  element.style.top = event.clientY - offsetY + 'px';
});

document.addEventListener('pointerup', (event) => {
  isDragging = false;
  element.releasePointerCapture(event.pointerId);
});

document.addEventListener('pointercancel', (event) => {
  isDragging = false;
  element.releasePointerCapture(event.pointerId);
});

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், இழுக்கும் செயல்முறையைத் தொடங்க pointerdown நிகழ்வைக் கேட்கிறோம். பின்னர், பாயிண்டரின் ஆயத்தொலைவுகளின் அடிப்படையில் எலிமென்ட்டின் நிலையைப் புதுப்பிக்க pointermove நிகழ்வைக் கேட்கிறோம். இறுதியாக, இழுக்கும் செயல்முறையை நிறுத்த pointerup மற்றும் pointercancel நிகழ்வுகளைக் கேட்கிறோம்.

எடுத்துக்காட்டு 2: வரைதல் பயன்பாடு

இந்த எடுத்துக்காட்டு பாயிண்டர் நிகழ்வுகள் API-ஐப் பயன்படுத்தி ஒரு எளிய வரைதல் பயன்பாட்டை எவ்வாறு உருவாக்குவது என்பதைக் காட்டுகிறது.

            
const canvas = document.getElementById('drawing-canvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('pointerdown', (event) => {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(event.offsetX, event.offsetY);
  canvas.setPointerCapture(event.pointerId);
});

canvas.addEventListener('pointermove', (event) => {
  if (!isDrawing) return;
  ctx.lineTo(event.offsetX, event.offsetY);
  ctx.stroke();
});

canvas.addEventListener('pointerup', (event) => {
  isDrawing = false;
  canvas.releasePointerCapture(event.pointerId);
});

canvas.addEventListener('pointercancel', (event) => {
  isDrawing = false;
  canvas.releasePointerCapture(event.pointerId);
});

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், ஒரு பாதையை வரையத் தொடங்க pointerdown நிகழ்வைக் கேட்கிறோம். பின்னர், பாயிண்டரின் ஆயத்தொலைவுகளின் அடிப்படையில் கோடுகளை வரைய pointermove நிகழ்வைக் கேட்கிறோம். இறுதியாக, பாதையை வரைவதை நிறுத்த pointerup மற்றும் pointercancel நிகழ்வுகளைக் கேட்கிறோம்.

எடுத்துக்காட்டு 3: பேனா அழுத்தத்தைக் கையாளுதல்

இந்த எடுத்துக்காட்டு, பேனாவால் வரையப்பட்ட கோட்டின் அகலத்தை மாற்றியமைக்க பாயிண்டர் நிகழ்வுகளின் pressure பண்பை எவ்வாறு பயன்படுத்துவது என்பதைக் காட்டுகிறது.

            
const canvas = document.getElementById('drawing-canvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('pointerdown', (event) => {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(event.offsetX, event.offsetY);
  canvas.setPointerCapture(event.pointerId);
});

canvas.addEventListener('pointermove', (event) => {
  if (!isDrawing) return;
  const pressure = event.pressure;
  ctx.lineWidth = pressure * 10; // Adjust the multiplier for desired thickness
  ctx.lineTo(event.offsetX, event.offsetY);
  ctx.stroke();
});

canvas.addEventListener('pointerup', (event) => {
  isDrawing = false;
  canvas.releasePointerCapture(event.pointerId);
});

canvas.addEventListener('pointercancel', (event) => {
  isDrawing = false;
  canvas.releasePointerCapture(event.pointerId);
});

            

              
                Copy
              
            
          

இங்கே, `pressure` பண்பு நேரடியாக `lineWidth`-ஐ பாதிக்கிறது, இது குறிப்பாக அழுத்தம்-உணர்திறன் கொண்ட பேனாக்களுடன் மிகவும் வெளிப்படையான மற்றும் இயற்கையான வரைதல் அனுபவத்தை உருவாக்குகிறது.

பாயிண்டர் நிகழ்வுகள் API-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

• `setPointerCapture` மற்றும் `releasePointerCapture` பயன்படுத்தவும்: இந்த முறைகள் ஒரு எலிமென்ட் பாயிண்டர் அதன் எல்லைகளுக்கு வெளியே நகர்ந்தாலும், அடுத்தடுத்த அனைத்து பாயிண்டர் நிகழ்வுகளையும் பெறுவதை உறுதி செய்வதற்கு முக்கியமானவை. இது குறிப்பாக இழுத்து விடும் தொடர்புகள் மற்றும் வரைதல் பயன்பாடுகளுக்கு முக்கியமானது.
• `pointercancel` நிகழ்வுகளைக் கையாளவும்: இந்த நிகழ்வுகள் எதிர்பாராதவிதமாக ஏற்படலாம், எனவே எதிர்பாராத நடத்தையைத் தடுக்க அவற்றை நளினமாகக் கையாள்வது முக்கியம்.
• `pointerType` பண்பைச் சரிபார்க்கவும்: நீங்கள் வெவ்வேறு பாயிண்டர் வகைகளை வித்தியாசமாகக் கையாள வேண்டுமானால், மவுஸ், டச் மற்றும் பேனா தொடர்புகளுக்கு இடையில் வேறுபடுத்த pointerType பண்பைப் பயன்படுத்தலாம்.
• அணுகல்தன்மையை கருத்தில் கொள்ளுங்கள்: உங்கள் செயல்படுத்தல் குறைபாடுகள் உள்ள பயனர்களுக்கு அணுகக்கூடியதாக இருப்பதை உறுதிசெய்யுங்கள். உதாரணமாக, பாயிண்டர் அடிப்படையிலான தொடர்புகளுக்கு விசைப்பலகை மாற்றுகளை வழங்கவும்.

உலாவி இணக்கத்தன்மை

பாயிண்டர் நிகழ்வுகள் API, Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் சிறந்த ஆதரவைக் கொண்டுள்ளது. இருப்பினும், உங்கள் குறியீடு வெவ்வேறு தளங்களில் எதிர்பார்த்தபடி செயல்படுவதை உறுதிசெய்ய Can I use போன்ற ஆதாரங்களில் சமீபத்திய உலாவி இணக்கத்தன்மை தகவல்களைச் சரிபார்ப்பது எப்போதும் ஒரு நல்ல நடைமுறையாகும்.

அடிப்படைகளுக்கு அப்பால்: மேம்பட்ட நுட்பங்கள்

மல்டி-டச் சைகைகளை செயல்படுத்துதல்

பாயிண்டர் நிகழ்வுகள் API மல்டி-டச் சைகைகளைக் கையாள்வதில் சிறந்து விளங்குகிறது. `pointerId` மதிப்புகளைக் கண்காணிப்பதன் மூலம், நீங்கள் தனிப்பட்ட டச் புள்ளிகளை நிர்வகிக்கலாம் மற்றும் பிஞ்ச்-டு-ஜூம், சுழற்றுதல் மற்றும் நகர்த்துதல் போன்ற சிக்கலான தொடர்புகளைச் செயல்படுத்தலாம்.

உதாரணமாக, ஒரு படத்தில் பிஞ்ச்-டு-ஜூம் செயல்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்:

            
const image = document.getElementById('zoomable-image');
let pointers = new Map();
let initialDistance = 0;
let initialScale = 1;

image.addEventListener('pointerdown', (event) => {
  pointers.set(event.pointerId, event);
  if (pointers.size === 2) {
    initialDistance = getDistance(pointers);
    initialScale = currentScale;
  }
  image.setPointerCapture(event.pointerId);
});

image.addEventListener('pointermove', (event) => {
  pointers.set(event.pointerId, event);
  if (pointers.size === 2) {
    const currentDistance = getDistance(pointers);
    const scaleFactor = currentDistance / initialDistance;
    currentScale = initialScale * scaleFactor;
    image.style.transform = `scale(${currentScale})`;
  }
});

image.addEventListener('pointerup', (event) => {
  pointers.delete(event.pointerId);
  if (pointers.size < 2) {
    initialDistance = 0;
  }
  image.releasePointerCapture(event.pointerId);
});

image.addEventListener('pointercancel', (event) => {
  pointers.delete(event.pointerId);
  if (pointers.size < 2) {
    initialDistance = 0;
  }
  image.releasePointerCapture(event.pointerId);
});

function getDistance(pointers) {
  const [pointer1, pointer2] = pointers.values();
  const dx = pointer1.clientX - pointer2.clientX;
  const dy = pointer1.clientY - pointer2.clientY;
  return Math.sqrt(dx * dx + dy * dy);
}

            

              
                Copy
              
            
          

இந்த குறியீடு துணுக்கு பல பாயிண்டர்களைக் கண்காணிப்பது மற்றும் பிஞ்ச்-டு-ஜூம் சைகையைச் செயல்படுத்த அவற்றுக்கிடையேயான தூரத்தைக் கணக்கிடுவது எப்படி என்பதைக் காட்டுகிறது. `getDistance` செயல்பாடு இரண்டு பாயிண்டர் ஆயத்தொலைவுகளுக்கு இடையிலான யூக்ளிடியன் தூரத்தைக் கணக்கிடுகிறது.

டச் சாதனங்களில் ஹோவர் விளைவுகளைக் கையாளுதல்

பாரம்பரியமாக, ஹோவர் விளைவுகள் மவுஸ் தொடர்புகளுக்கு மட்டுமே περιορισப்பட்டிருந்தன. பாயிண்டர் நிகழ்வுகள் API, `pointerenter` மற்றும் `pointerleave` நிகழ்வுகளைப் பயன்படுத்தி டச் சாதனங்களில் ஹோவர் விளைவுகளைப் பின்பற்ற உங்களை அனுமதிக்கிறது.

            
const element = document.getElementById('hoverable-element');

element.addEventListener('pointerenter', () => {
  element.classList.add('hovered');
});

element.addEventListener('pointerleave', () => {
  element.classList.remove('hovered');
});

            

              
                Copy
              
            
          

இந்த குறியீடு, பாயிண்டர் அதன் எல்லைக்குள் நுழையும்போது எலிமென்ட்டிற்கு "hovered" வகுப்பைச் சேர்க்கிறது மற்றும் பாயிண்டர் வெளியேறும்போது அதை நீக்குகிறது, இது டச் சாதனங்களில் ஹோவர் விளைவை திறம்பட பின்பற்றுகிறது.

உலகளாவிய பரிசீலனைகள் மற்றும் கலாச்சார நுணுக்கங்கள்

பாயிண்டர் நிகழ்வுகளைச் செயல்படுத்தும்போது, குறிப்பாக உலகளாவிய பார்வையாளர்களுக்காக, கலாச்சார நுணுக்கங்கள் மற்றும் அணுகல்தன்மை தரநிலைகளைக் கருத்தில் கொள்வது முக்கியம்.

• உள்ளீட்டு சாதனப் பரவல்: சில பிராந்தியங்களில், பாரம்பரிய மவுஸ்களை விட டச் அடிப்படையிலான சாதனங்கள் அதிகம் பரவலாக உள்ளன. மவுஸ் இணக்கத்தன்மையை உறுதி செய்யும் அதே வேளையில் டச் தொடர்புகளுக்கு முன்னுரிமை அளிக்கும் வகையில் உங்கள் இடைமுகங்களை வடிவமைக்கவும்.
• அணுகல்தன்மை: குறைபாடுகள் உள்ள பயனர்களுக்கு எப்போதும் மாற்று உள்ளீட்டு முறைகளை வழங்கவும். விசைப்பலகை வழிசெலுத்தல் மற்றும் ஸ்கிரீன் ரீடர் இணக்கத்தன்மை அவசியம்.
• இடஞ்சார்ந்த சைகைகள்: கலாச்சார ரீதியாக குறிப்பிட்ட சைகைகள் அல்லது தொடர்பு முறைகளைக் கவனத்தில் கொள்ளுங்கள். உள்ளுணர்வு பயன்பாட்டை உறுதிப்படுத்த உங்கள் பயன்பாட்டை பல்வேறு பின்னணியில் உள்ள பயனர்களுடன் சோதிக்கவும்.

முடிவுரை

பாயிண்டர் நிகழ்வுகள் API பல்வேறு சாதனங்களிலிருந்து உள்ளீட்டைக் கையாள ஒரு சக்திவாய்ந்த மற்றும் ஒருங்கிணைந்த அணுகுமுறையை வழங்குகிறது. இந்த API-ஐ ஏற்றுக்கொள்வதன் மூலம், வலை உருவாக்குநர்கள் தங்கள் குறியீட்டை எளிதாக்கலாம், பல-சாதன இணக்கத்தன்மையை மேம்படுத்தலாம் மற்றும் மேலும் ஈடுபாட்டுடன் மற்றும் அணுகக்கூடிய பயனர் அனுபவங்களை உருவாக்கலாம். வலை தொடர்ந்து বিকশিত 되고 புதிய உள்ளீட்டு சாதனங்கள் வெளிவரும்போது, பாயிண்டர் நிகழ்வுகள் API நவீன, பதிலளிக்கக்கூடிய வலை பயன்பாடுகளை உருவாக்குவதற்கான ஒரு அவசியமான கருவியாக இருக்கும்.

பாயிண்டர் நிகழ்வுகள் API-யின் முக்கிய கருத்துகள், நிகழ்வு வகைகள் மற்றும் பண்புகளைப் புரிந்துகொள்வதன் மூலம், உங்கள் வலை மேம்பாட்டுத் திட்டங்களில் ஒரு புதிய அளவிலான கட்டுப்பாடு மற்றும் நெகிழ்வுத்தன்மையை நீங்கள் திறக்கலாம். இன்றே API உடன் பரிசோதனை செய்யத் தொடங்கி, உள்ளீட்டு சாதனக் கையாளுதலுக்கான ஒரு ஒருங்கிணைந்த அணுகுமுறையின் நன்மைகளைக் கண்டறியுங்கள்.