மெனு உறுப்புகளுக்கு வெளியே கிளிக்குகளைக் கையாளுதல்
இணைய மேம்பாட்டில், குறிப்பாக மெனுக்கள் போன்ற ஊடாடும் கூறுகளைக் கையாளும் போது, பயனர் தொடர்புகளை திறம்பட நிர்வகிப்பது மிகவும் முக்கியமானது. ஒரு பொதுவான தேவை என்னவென்றால், ஒரு பயனர் கிளிக் செய்யும் போது மெனுக்களைக் காண்பிப்பதும், இந்த மெனுக்களுக்கு வெளியே பயனர் எங்கு கிளிக் செய்தால் அவற்றை மறைப்பதும் ஆகும். இது இடைமுகத்தை சுத்தமாகவும் உள்ளுணர்வுடனும் வைத்திருப்பதன் மூலம் பயனர் அனுபவத்தை மேம்படுத்துகிறது.
இந்த செயல்பாட்டை அடைவதற்கு, குறிப்பிட்ட உறுப்புக்கு வெளியே உள்ள கிளிக்குகளைக் கண்டறியும் முறை தேவைப்படுகிறது. இந்தக் கட்டுரையில், jQueryயைப் பயன்படுத்தி இந்த நடத்தையை எவ்வாறு செயல்படுத்துவது என்பதை ஆராய்வோம். உங்கள் சொந்த திட்டங்களில் இந்த அம்சத்தை ஒருங்கிணைக்க உங்களுக்கு உதவ விரிவான உதாரணத்தையும் விளக்கத்தையும் வழங்குவோம்.
கட்டளை | விளக்கம் |
---|---|
$(document).ready() | ஒரு jQuery முறை, எந்த குறியீட்டையும் இயக்கும் முன் DOM முழுமையாக ஏற்றப்பட்டிருப்பதை உறுதி செய்கிறது. |
$(document).click() | jQuery இல் உள்ள ஆவணப் பொருளின் மீது கிளிக் நிகழ்வுகளுக்கான நிகழ்வு ஹேண்ட்லர் செயல்பாட்டை இணைக்கிறது. |
closest() | தேர்வாளருடன் பொருந்தக்கூடிய ஒரு தனிமத்தின் முதல் மூதாதையரைக் கண்டறிய jQuery முறை. |
useRef() | DOM உறுப்பை நேரடியாக அணுகுவதற்கு மாற்றக்கூடிய ref பொருளை வழங்கும் ரியாக்ட் ஹூக். |
useEffect() | செயல்பாட்டுக் கூறுகளில் பக்க விளைவுகளைச் செய்வதற்கான ஒரு எதிர்வினை கொக்கி. |
addEventListener() | ஏற்கனவே உள்ள நிகழ்வு ஹேண்ட்லர்களை மேலெழுதாமல் ஒரு உறுப்புடன் நிகழ்வு ஹேண்ட்லரை இணைக்கிறது. |
removeEventListener() | addEventListener() உடன் இணைக்கப்பட்ட நிகழ்வு ஹேண்ட்லரை நீக்குகிறது. |
contains() | ஒரு முனை கொடுக்கப்பட்ட முனையின் வழித்தோன்றல் என்பதைச் சரிபார்க்க DOM முறை. |
கிளிக் அவுட்சைட் கண்டறிதலின் செயலாக்கத்தைப் புரிந்துகொள்வது
வழங்கப்பட்ட ஸ்கிரிப்டுகள் jQuery, Vanilla JavaScript மற்றும் React ஆகியவற்றைப் பயன்படுத்தி ஒரு குறிப்பிட்ட உறுப்புக்கு வெளியே உள்ள கிளிக்குகளைக் கண்டறிந்து கையாள பல்வேறு வழிகளை வழங்குகின்றன. jQuery எடுத்துக்காட்டில், ஸ்கிரிப்ட் முதலில் DOM உடன் முழுமையாக ஏற்றப்பட்டிருப்பதை உறுதி செய்கிறது முறை. தி முழு ஆவணத்திலும் நிகழ்வு கையாளுதலை இணைக்க முறை பயன்படுத்தப்படுகிறது. இந்த ஹேண்ட்லரின் உள்ளே, கிளிக் நிகழ்வின் இலக்கு வெளியே உள்ளதா என்பதை நாங்கள் சரிபார்க்கிறோம் உறுப்பு பயன்படுத்தி closest() முறை. மெனுவிற்கு வெளியே கிளிக் செய்தால், மெனு மறைக்கப்படும் . மெனு தலையில் கிளிக் செய்வதன் மூலம் மெனுவைப் பயன்படுத்தும் முறை.
வெண்ணிலா ஜாவாஸ்கிரிப்ட் உதாரணம் இதேபோல் இயங்குகிறது ஆனால் எந்த வெளிப்புற நூலகங்களும் இல்லாமல். ஸ்கிரிப்ட் ஒரு கிளிக் நிகழ்வு கேட்பவரை ஆவணத்துடன் சேர்க்கிறது . கிளிக் இலக்கு உள்ளே உள்ளதா என்பதை அது சரிபார்க்கிறது பயன்படுத்தி முறை. இலக்கு உள்ளே இல்லை என்றால், 'இல்லை' என காட்சிப் பொருளை அமைப்பதன் மூலம் மெனு மறைக்கப்படும். மெனு தலையில் கிளிக் செய்வதன் மூலம், மெனுவைத் தெரியும்படி, காட்சிப் பண்பு 'தடுக்க' அமைக்கிறது. இந்த முறையானது எளிய ஜாவாஸ்கிரிப்ட் மூலம் செயல்பாடு அடையப்படுவதை உறுதி செய்கிறது, இது இலகுரக தீர்வாக அமைகிறது.
கிளிக் வெளியில் கண்டறிவதற்கான எதிர்வினையை ஆராய்கிறது
எதிர்வினை எடுத்துக்காட்டில், நிலை மற்றும் பக்க விளைவுகளை நிர்வகிக்க நாங்கள் கொக்கிகளைப் பயன்படுத்துகிறோம். தி கொக்கி ஒரு குறிப்பை உருவாக்குகிறது உறுப்பு, அதை நேரடியாக அணுக அனுமதிக்கிறது. தி கிளிக் நிகழ்வு கேட்பவரை சேர்க்க மற்றும் அகற்ற hook பயன்படுத்தப்படுகிறது. நிகழ்வு ஹேண்ட்லருக்குள், கிளிக் மெனுவிற்கு வெளியே உள்ளதா என்பதை நாங்கள் சரிபார்க்கிறோம் contains() குறிப்பு மீது முறை. அப்படியானால், மெனுவை மறைக்க மாநிலத்தைப் புதுப்பிக்கிறோம். மெனு ஹெட் கிளிக் நிகழ்வு, மெனுவைக் காட்ட மாநிலத்தைப் புதுப்பிப்பதன் மூலம் கையாளப்படுகிறது. இந்த உதாரணம், கிளிக் வெளிப்புற கண்டறிதலை நவீன ரியாக்ட் பயன்பாட்டில் எவ்வாறு ஒருங்கிணைப்பது என்பதை விளக்குகிறது.
இந்த வெவ்வேறு அணுகுமுறைகளைப் பயன்படுத்துவதன் மூலம், உங்கள் திட்டத்தின் தேவைகளுக்கு மிகவும் பொருத்தமான முறையை நீங்கள் தேர்வு செய்யலாம். jQuery முறையானது நேரடியானது மற்றும் jQuery இன் எளிமையைப் பயன்படுத்துகிறது. வெண்ணிலா ஜாவாஸ்கிரிப்ட் முறை இலகுரக, சார்பு இல்லாத தீர்வை வழங்குகிறது. ரியாக்ட் முறையானது, நிலை மற்றும் பக்க விளைவுகளை நிர்வகிப்பதற்கு நவீன ரியாக்ட் ஹூக்குகளை எவ்வாறு பயன்படுத்துவது என்பதை நிரூபிக்கிறது, ரியாக்ட் பயன்பாடுகளுக்கு வலுவான தீர்வை வழங்குகிறது. ஒவ்வொரு அணுகுமுறையும் குறிப்பிட்ட உறுப்புகளுக்கு வெளியே பயனர் தொடர்புகளின் அடிப்படையில் மெனுக்கள் காண்பிக்கப்படுவதையும் மறைக்கப்படுவதையும் உறுதிசெய்கிறது, இது பயனர் அனுபவத்தை மேம்படுத்துகிறது.
jQuery ஐப் பயன்படுத்தி ஒரு உறுப்புக்கு வெளியே உள்ள கிளிக்குகளைக் கண்டறிதல்
jQuery செயல்படுத்தல்
// jQuery implementation to hide menus on outside click
$(document).ready(function() {
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.closest('#menuscontainer').length &&
$('#menuscontainer').is(":visible")) {
$('#menuscontainer').hide();
}
});
$('#menuhead').click(function() {
$('#menuscontainer').show();
});
});
வெண்ணிலா ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒரு உறுப்புக்கு வெளியே கிளிக்குகளைக் கையாளுதல்
வெண்ணிலா ஜாவாஸ்கிரிப்ட் செயல்படுத்தல்
// Vanilla JavaScript implementation to hide menus on outside click
document.addEventListener('click', function(event) {
var isClickInside = document.getElementById('menuscontainer').contains(event.target);
if (!isClickInside) {
document.getElementById('menuscontainer').style.display = 'none';
}
});
document.getElementById('menuhead').addEventListener('click', function() {
document.getElementById('menuscontainer').style.display = 'block';
});
எதிர்வினையைப் பயன்படுத்தி ஒரு உறுப்புக்கு வெளியே உள்ள கிளிக்குகளைக் கண்டறிதல்
எதிர்வினை செயல்படுத்தல்
// React implementation to hide menus on outside click
import React, { useRef, useEffect, useState } from 'react';
const MenuComponent = () => {
const menuRef = useRef(null);
const [isMenuVisible, setMenuVisible] = useState(false);
useEffect(() => {
function handleClickOutside(event) {
if (menuRef.current && !menuRef.current.contains(event.target)) {
setMenuVisible(false);
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [menuRef]);
return (
<div>
<div id="menuhead" onClick={() => setMenuVisible(true)}>Menu Head</div>
{isMenuVisible &&
<div id="menuscontainer" ref={menuRef}>
<p>Menu Content</p>
</div>
}
</div>
);
};
export default MenuComponent;
கிளிக் வெளியே கண்டறிதல் மூலம் பயனர் தொடர்புகளை மேம்படுத்துதல்
ஒரு உறுப்புக்கு வெளியே உள்ள கிளிக்குகளைக் கண்டறிவது வலைப்பக்கத்தில் பயனர் தொடர்புகளை மேம்படுத்துவதற்கு முக்கியமானது. இந்த நுட்பம் பொதுவாக கீழ்தோன்றும் மெனுக்கள், மாதிரி உரையாடல்கள் மற்றும் உதவிக்குறிப்புகள் ஆகியவற்றில் தடையற்ற பயனர் அனுபவத்தை வழங்க பயன்படுகிறது. கருத்தில் கொள்ள வேண்டிய ஒரு மேம்பட்ட அம்சம், வெளிப்புற கிளிக்குகளின் அடிப்படையில் மறைக்க வேண்டிய பல கூறுகளைக் கையாளுவதாகும். இது மிகவும் சிக்கலான தர்க்கத்தை உள்ளடக்கியது, சரியான கூறுகள் மறைந்திருக்கும் போது மற்றவை தெரியும். இதைச் செயல்படுத்த, நிகழ்வுகளைக் கவனமாகக் கையாளுதல் மற்றும் தற்போது காணக்கூடிய கூறுகளின் நிலையைப் பராமரிப்பது அவசியம்.
மற்றொரு முக்கியமான கருத்தில் அணுகல். உங்கள் ஊடாடும் கூறுகள் குறைபாடுகள் உள்ள பயனர்களுக்கு அணுகக்கூடியதாக இருப்பதை உறுதிசெய்வது இன்றியமையாதது. உதாரணமாக, கீழ்தோன்றும் மெனுக்கள் மற்றும் மாடல்களை வெளியே கிளிக் செய்வதன் மூலம் மட்டும் மூட முடியாது என்பதை நீங்கள் உறுதி செய்ய வேண்டும், ஆனால் அழுத்தவும் முக்கிய கூடுதலாக, விசைப்பலகை வழிசெலுத்தல் உள்ளுணர்வு மற்றும் செயல்பாட்டுடன் இருக்க, கவனத்தை சரியான முறையில் நிர்வகிப்பது முக்கியம். இந்த அம்சங்களைச் செயல்படுத்துவதற்கு JavaScript மற்றும் அணுகல்தன்மை சிறந்த நடைமுறைகள் இரண்டையும் நன்கு புரிந்துகொண்டு பயனர் அனுபவத்தை உருவாக்க வேண்டும்.
- வெளிப்புற கிளிக் கண்டறிதல் மூலம் பல மெனுக்களை எவ்வாறு கையாள்வது?
- ஒவ்வொரு மெனுவிற்கும் ஒரு வகுப்பைச் சேர்ப்பதன் மூலம் பல மெனுக்களை நீங்கள் நிர்வகிக்கலாம் மற்றும் அவற்றில் ஏதேனும் ஒரு கிளிக் வெளியே நடந்ததா என்பதைச் சரிபார்க்க அவற்றை மீண்டும் செய்யவும். பயன்படுத்த ஒவ்வொரு மெனுவிற்கும் கிளிக் செய்யப்பட்ட உறுப்புகளின் தொடர்பைத் தீர்மானிக்கும் முறை.
- எஸ்கேப் விசையை அழுத்தும் போது எனது மோடலை எவ்வாறு மூடுவது?
- நிகழ்வு கேட்பவரைச் சேர்க்கவும் நிகழ்வு மற்றும் சரிபார்க்கவும் அல்லது சொத்து 27க்கு சமம் (எஸ்கேப் கீ). உண்மை என்றால், மாதிரியை மறைக்கவும்.
- jQuery இல்லாமல் கிளிக் அவுட்டில் கண்டறிதலை நான் பயன்படுத்தலாமா?
- ஆம், நிகழ்வைக் கேட்பவர்களைச் சேர்க்க எளிய ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம் மற்றும் உங்கள் உறுப்புக்கு எதிராக நிகழ்வு இலக்கைச் சரிபார்க்கலாம். மேலே உள்ள எடுத்துக்காட்டுகள் வெண்ணிலா ஜாவாஸ்கிரிப்ட் மூலம் இதை நிரூபிக்கின்றன.
- கிளிக் வெளியே கண்டறிதல் மூலம் அணுகலை உறுதி செய்வது எப்படி?
- உங்கள் ஊடாடும் கூறுகளை மவுஸ் மற்றும் கீபோர்டு இரண்டிலும் இயக்க முடியும் என்பதை உறுதிப்படுத்தவும். இந்த உறுப்புகளை அணுகக்கூடியதாக மாற்ற ARIA பாத்திரங்களையும் பண்புகளையும் பயன்படுத்தவும், மேலும் கவனம் நிலைகளை சரியான முறையில் நிர்வகிக்கவும்.
- ரியாக்டில் உள்ள உறுப்புக்கு வெளியே உள்ள கிளிக்குகளைக் கண்டறிய முடியுமா?
- ஆம், ரியாக்ட் போன்ற கொக்கிகளை வழங்குகிறது மற்றும் கூறு மவுண்ட் மற்றும் அன்மவுண்ட் ஆகியவற்றில் நிகழ்வு கேட்பவர்களை இணைத்து அகற்றுவதன் மூலம் வெளிப்புற கிளிக்குகளைக் கையாள.
- கிளிக் வெளியே கண்டறிவதற்கான செயல்திறன் பரிசீலனைகள் என்ன?
- ஆவணத்தில் நிகழ்வு கேட்பவர்களைச் சேர்ப்பது செயல்திறனைப் பாதிக்கும், குறிப்பாக பல கூறுகளுடன். நிகழ்வு ஹேண்ட்லரை டீபவுன்ஸ் செய்து, தேவையில்லாத போது கேட்பவர்களை அகற்றுவதன் மூலம் மேம்படுத்தவும்.
- Angular அல்லது Vue போன்ற கட்டமைப்புகளுடன் நான் கிளிக் அவுட்டில் கண்டறிதலைப் பயன்படுத்தலாமா?
- ஆம், Angular மற்றும் Vue ஆகிய இரண்டும் உறுப்புகளுக்கு வெளியே உள்ள கிளிக்குகளைக் கண்டறியும் வழிமுறைகளை வழங்குகின்றன. கோணமானது வழிமுறைகளைப் பயன்படுத்துகிறது, அதே சமயம் Vue தனிப்பயன் கட்டளைகளை அல்லது கூறுக்குள் நிகழ்வு கையாளுதலைப் பயன்படுத்துகிறது.
- கண்டறியும் செயல்பாட்டிற்கு வெளியே கிளிக் செய்வதை எப்படிச் சோதிப்பது?
- எதிர்வினைக்கு ஜெஸ்ட் மற்றும் என்சைம் அல்லது கோணத்திற்கு ஜாஸ்மின் மற்றும் கர்மா போன்ற தானியங்கு சோதனைக் கருவிகளைப் பயன்படுத்தவும். கிளிக் நிகழ்வுகளை உருவகப்படுத்தி, கூறுகள் எதிர்பார்த்தபடி செயல்படுகின்றனவா என்பதைச் சரிபார்க்கவும்.
- மாறும் வகையில் சேர்க்கப்பட்ட உறுப்புகளுக்கு நான் கிளிக் அவுட் கண்டறிதலைப் பயன்படுத்தலாமா?
- ஆம், உங்கள் நிகழ்வு கேட்போர் மாறும் வகையில் சேர்க்கப்பட்ட கூறுகளைக் கையாளும் வகையில் அமைக்கப்பட்டிருப்பதை உறுதிசெய்யவும். ஆரம்ப சுமைக்குப் பிறகு சேர்க்கப்படும் உறுப்புகளுக்கான நிகழ்வுகளை நிர்வகிக்க நிகழ்வு பிரதிநிதித்துவத்தைப் பயன்படுத்தவும்.
கிளிக் வெளியே கண்டறிவதற்கான நுட்பங்களை மூடுதல்
உங்கள் இணையப் பயன்பாடுகளில் கிளிக் அவுட் கண்டறிதலை இணைப்பது பயனர் தொடர்புகளை கணிசமாக மேம்படுத்துகிறது. jQuery, வெண்ணிலா ஜாவாஸ்கிரிப்ட் அல்லது ரியாக்ட் ஆகியவற்றைப் பயன்படுத்தினாலும், வழங்கப்பட்ட தீர்வுகள் டைனமிக் கூறுகளை திறமையாக நிர்வகிக்க உதவுகின்றன. இந்த முறைகளைப் புரிந்துகொண்டு பயன்படுத்துவதன் மூலம், மெனுக்கள் மற்றும் மாதிரிகள் கணிக்கக்கூடிய வகையில் செயல்படுவதை உறுதிசெய்து, ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்துகிறது. இந்த அணுகுமுறை இடைமுகத்தை நெறிப்படுத்துவது மட்டுமின்றி அணுகல்தன்மையை பராமரிக்கிறது, அனைத்து பயனர்களும் உங்கள் இணைய பயன்பாட்டுடன் தடையின்றி தொடர்பு கொள்ள முடியும் என்பதை உறுதிப்படுத்துகிறது.