ஜாவாஸ்கிரிப்டில் ஒரு உறுப்புக்கு வெளியே உள்ள கிளிக்குகளைக் கண்டறிதல்

மெனு உறுப்புகளுக்கு வெளியே கிளிக்குகளைக் கையாளுதல்

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

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

கிளிக் அவுட்சைட் கண்டறிதலின் செயலாக்கத்தைப் புரிந்துகொள்வது

வழங்கப்பட்ட ஸ்கிரிப்டுகள் jQuery, Vanilla JavaScript மற்றும் React ஆகியவற்றைப் பயன்படுத்தி ஒரு குறிப்பிட்ட உறுப்புக்கு வெளியே உள்ள கிளிக்குகளைக் கண்டறிந்து கையாள பல்வேறு வழிகளை வழங்குகின்றன. jQuery எடுத்துக்காட்டில், ஸ்கிரிப்ட் முதலில் DOM உடன் முழுமையாக ஏற்றப்பட்டிருப்பதை உறுதி செய்கிறது $(document).ready() முறை. தி $(document).click() முழு ஆவணத்திலும் நிகழ்வு கையாளுதலை இணைக்க முறை பயன்படுத்தப்படுகிறது. இந்த ஹேண்ட்லரின் உள்ளே, கிளிக் நிகழ்வின் இலக்கு வெளியே உள்ளதா என்பதை நாங்கள் சரிபார்க்கிறோம் #menuscontainer உறுப்பு பயன்படுத்தி closest() முறை. மெனுவிற்கு வெளியே கிளிக் செய்தால், மெனு மறைக்கப்படும் $('#menuscontainer').hide(). மெனு தலையில் கிளிக் செய்வதன் மூலம் மெனுவைப் பயன்படுத்தும் $('#menuhead').click() முறை.

வெண்ணிலா ஜாவாஸ்கிரிப்ட் உதாரணம் இதேபோல் இயங்குகிறது ஆனால் எந்த வெளிப்புற நூலகங்களும் இல்லாமல். ஸ்கிரிப்ட் ஒரு கிளிக் நிகழ்வு கேட்பவரை ஆவணத்துடன் சேர்க்கிறது addEventListener('click'). கிளிக் இலக்கு உள்ளே உள்ளதா என்பதை அது சரிபார்க்கிறது #menuscontainer பயன்படுத்தி contains() முறை. இலக்கு உள்ளே இல்லை என்றால், 'இல்லை' என காட்சிப் பொருளை அமைப்பதன் மூலம் மெனு மறைக்கப்படும். மெனு தலையில் கிளிக் செய்வதன் மூலம், மெனுவைத் தெரியும்படி, காட்சிப் பண்பு 'தடுக்க' அமைக்கிறது. இந்த முறையானது எளிய ஜாவாஸ்கிரிப்ட் மூலம் செயல்பாடு அடையப்படுவதை உறுதி செய்கிறது, இது இலகுரக தீர்வாக அமைகிறது.

கிளிக் வெளியில் கண்டறிவதற்கான எதிர்வினையை ஆராய்கிறது

எதிர்வினை எடுத்துக்காட்டில், நிலை மற்றும் பக்க விளைவுகளை நிர்வகிக்க நாங்கள் கொக்கிகளைப் பயன்படுத்துகிறோம். தி useRef() கொக்கி ஒரு குறிப்பை உருவாக்குகிறது #menuscontainer உறுப்பு, அதை நேரடியாக அணுக அனுமதிக்கிறது. தி useEffect() கிளிக் நிகழ்வு கேட்பவரை சேர்க்க மற்றும் அகற்ற hook பயன்படுத்தப்படுகிறது. நிகழ்வு ஹேண்ட்லருக்குள், கிளிக் மெனுவிற்கு வெளியே உள்ளதா என்பதை நாங்கள் சரிபார்க்கிறோம் contains() குறிப்பு மீது முறை. அப்படியானால், மெனுவை மறைக்க மாநிலத்தைப் புதுப்பிக்கிறோம். மெனு ஹெட் கிளிக் நிகழ்வு, மெனுவைக் காட்ட மாநிலத்தைப் புதுப்பிப்பதன் மூலம் கையாளப்படுகிறது. இந்த உதாரணம், கிளிக் வெளிப்புற கண்டறிதலை நவீன ரியாக்ட் பயன்பாட்டில் எவ்வாறு ஒருங்கிணைப்பது என்பதை விளக்குகிறது.

இந்த வெவ்வேறு அணுகுமுறைகளைப் பயன்படுத்துவதன் மூலம், உங்கள் திட்டத்தின் தேவைகளுக்கு மிகவும் பொருத்தமான முறையை நீங்கள் தேர்வு செய்யலாம். 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;

கிளிக் வெளியே கண்டறிதல் மூலம் பயனர் தொடர்புகளை மேம்படுத்துதல்

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

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

கிளிக் வெளியே கண்டறிவதற்கான நுட்பங்களை மூடுதல்

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