Paspaudimų už elemento ribų aptikimas „JavaScript“.

Paspaudimų už meniu elementų tvarkymas

Kuriant žiniatinklį, ypač kai kalbama apie interaktyvius elementus, pvz., meniu, labai svarbu efektyviai valdyti vartotojų sąveiką. Vienas iš dažniausių reikalavimų yra rodyti meniu, kai vartotojas juos spusteli, ir paslėpti, kai vartotojas spusteli bet kurią kitą vietą už šių meniu ribų. Tai pagerina vartotojo patirtį, nes sąsaja yra švari ir intuityvi.

Norint pasiekti šią funkciją, reikalingas metodas, leidžiantis aptikti paspaudimus už nurodyto elemento ribų. Šiame straipsnyje mes išnagrinėsime, kaip įgyvendinti šį elgesį naudojant jQuery. Pateiksime išsamų pavyzdį ir paaiškinimą, kuris padės integruoti šią funkciją į savo projektus.

komandą	apibūdinimas
$(document).ready()	„jQuery“ metodas, užtikrinantis, kad DOM būtų visiškai įkeltas prieš vykdant bet kokį kodą.
$(document).click()	Prideda įvykių tvarkyklės funkciją, skirtą spustelėti įvykius dokumento objekte sistemoje jQuery.
closest()	jQuery metodas, skirtas rasti pirmąjį elemento protėvį, atitinkantį parinkiklį.
useRef()	Reakcijos kabliukas, kuris grąžina kintamą ref objektą, kad būtų galima tiesiogiai pasiekti DOM elementą.
useEffect()	„React“ kabliukas, skirtas šalutiniam funkcinių komponentų poveikiui atlikti.
addEventListener()	Prideda įvykių tvarkyklę prie elemento neperrašant esamų įvykių tvarkyklių.
removeEventListener()	Pašalina įvykių tvarkyklę, kuri buvo pridėta naudojant addEventListener().
contains()	DOM metodas, skirtas patikrinti, ar mazgas yra tam tikro mazgo palikuonis.

Supratimas apie paspaudimo išorėje aptikimo įgyvendinimą

Pateikti scenarijai siūlo skirtingus būdus, kaip aptikti ir valdyti paspaudimus už nurodyto elemento ribų, naudojant jQuery, Vanilla JavaScript ir React. „jQuery“ pavyzdyje scenarijus pirmiausia užtikrina, kad DOM būtų visiškai įkeltas metodas. The Tada metodas naudojamas įvykių tvarkyklei pridėti prie viso dokumento. Šioje tvarkyklėje patikriname, ar paspaudimo įvykio taikinys yra už elementą naudojant closest() metodas. Jei spustelėjimas įvyksta už meniu, meniu yra paslėptas . Spustelėjus meniu antraštę rodomas meniu naudojant metodas.

Vanilla JavaScript pavyzdys veikia panašiai, bet be jokių išorinių bibliotekų. Scenarijus prie dokumento prideda paspaudimo įvykių klausytoją . Tada patikrinama, ar paspaudimo tikslas yra viduje naudojant metodas. Jei tikslo nėra viduje, meniu paslėptas, nustatant rodymo ypatybę į „nėra“. Spustelėjus meniu galvutę, ekrano ypatybė nustatoma į „blokuoti“, todėl meniu tampa matomas. Šis metodas užtikrina, kad funkcionalumas pasiekiamas naudojant paprastą „JavaScript“, todėl tai yra lengvas sprendimas.

Ištirkite „React“ spustelėjimui iš išorės

„React“ pavyzdyje mes naudojame kabliukus, kad valdytume būseną ir šalutinį poveikį. The kabliukas sukuria nuorodą į elementas, leidžiantis mums tiesiogiai jį pasiekti. The kabliukas naudojamas norint pridėti ir pašalinti paspaudimo įvykių klausytoją. Įvykių tvarkyklėje patikriname, ar spustelėjimas yra už meniu, naudodami contains() metodas nuorodoje. Jei taip, atnaujiname būseną, kad paslėptumėte meniu. Meniu galvutės paspaudimo įvykis tvarkomas atnaujinant būseną, kad būtų rodomas meniu. Šiame pavyzdyje parodyta, kaip integruoti išorinį paspaudimo aptikimą į modernią „React“ programą.

Naudodami šiuos skirtingus metodus galite pasirinkti metodą, kuris geriausiai atitinka jūsų projekto reikalavimus. „jQuery“ metodas yra paprastas ir išnaudoja „jQuery“ paprastumą. „Vanilla JavaScript“ metodas yra lengvas, nepriklausomas sprendimas. „React“ metodas parodo, kaip naudoti modernius „React“ kabliukus, kad būtų galima valdyti būseną ir šalutinį poveikį, siūlant patikimą „React“ programų sprendimą. Kiekvienas metodas užtikrina, kad meniu būtų rodomas ir paslėptas atsižvelgiant į vartotojo sąveiką už nurodytų elementų ribų, taip pagerinant vartotojo patirtį.

// 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;

Vartotojo sąveikos gerinimas naudojant paspaudimo išorėje aptikimą

Paspaudimų už elemento ribų aptikimas yra labai svarbus siekiant pagerinti naudotojo sąveiką tinklalapyje. Ši technika dažniausiai naudojama išskleidžiamuosiuose meniu, modaliniuose dialogo languose ir patarimuose, siekiant užtikrinti sklandžią vartotojo patirtį. Vienas iš sudėtingesnių aspektų, į kuriuos reikia atsižvelgti, yra kelių elementų, kuriuos reikia paslėpti dėl išorinių paspaudimų, tvarkymas. Tai gali apimti sudėtingesnę logiką, siekiant užtikrinti, kad teisingi elementai būtų paslėpti, o kiti liktų matomi. Norint tai įgyvendinti, reikia atidžiai tvarkyti įvykius ir galbūt išlaikyti būseną, kurie elementai šiuo metu yra matomi.

Kitas svarbus aspektas yra prieinamumas. Labai svarbu užtikrinti, kad jūsų interaktyvūs elementai būtų prieinami naudotojams su negalia. Pavyzdžiui, turėtumėte užtikrinti, kad išskleidžiamuosius meniu ir modalus būtų galima uždaryti ne tik spustelėjus lauke, bet ir paspaudus Raktas. Be to, svarbu tinkamai valdyti fokusavimą, kad klaviatūros naršymas būtų intuityvus ir funkcionalus. Norint įdiegti šias funkcijas, reikia gerai suprasti JavaScript ir pritaikymo neįgaliesiems geriausią praktiką, kad būtų sukurta visa apimanti naudotojo patirtis.

1. Kaip galiu valdyti kelis meniu su išorinių paspaudimų aptikimu?
2. Galite tvarkyti kelis meniu, įtraukdami klasę prie kiekvieno meniu ir kartodami juos, kad patikrintumėte, ar paspaudimas įvyko už kurio nors iš jų ribų. Naudoti būdas nustatyti spustelėto elemento ryšį su kiekvienu meniu.
3. Kaip priversti modalą užsidaryti, kai paspaudžiamas pabėgimo klavišas?
4. Pridėkite įvykių klausytoją įvykį ir patikrinkite, ar arba ypatybė yra lygi 27 (Escape klavišas). Jei tiesa, paslėpkite modalą.
5. Ar galiu naudoti išorinį paspaudimo aptikimą be „jQuery“?
6. Taip, galite naudoti paprastą „JavaScript“, kad pridėtumėte įvykių klausytojų ir patikrintumėte įvykio tikslą pagal savo elementą. Aukščiau pateikti pavyzdžiai parodo tai naudojant „Vanilla JavaScript“.
7. Kaip užtikrinti pasiekiamumą naudojant spustelėjimo išorėje aptikimą?
8. Įsitikinkite, kad jūsų interaktyvūs elementai gali būti valdomi ir pele, ir klaviatūra. Naudokite ARIA vaidmenis ir ypatybes, kad šie elementai būtų pasiekiami, ir tinkamai valdykite fokusavimo būsenas.
9. Ar „React“ galima aptikti paspaudimus už elemento ribų?
10. Taip, „React“ siūlo tokius kabliukus ir valdyti išorinius paspaudimus, pritvirtinant ir pašalinant įvykių klausytojus prie komponento pritvirtinimo ir atjungimo.
11. Kokie yra našumo aspektai, norint aptikti paspaudimą iš išorės?
12. Įvykių klausytojų įtraukimas į dokumentą gali paveikti našumą, ypač su daugeliu elementų. Optimizuokite atšaukdami įvykių tvarkyklę ir pašalindami klausytojus, kai jų nereikia.
13. Ar galiu naudoti išorinį paspaudimo aptikimą su tokiomis sistemomis kaip „Angular“ ar „Vue“?
14. Taip, „Angular“ ir „Vue“ suteikia mechanizmus, leidžiančius aptikti paspaudimus už elementų ribų. „Angular“ naudoja direktyvas, o „Vue“ naudoja pasirinktines direktyvas arba įvykių tvarkymą komponente.
15. Kaip išbandyti spustelėjimo už aptikimo ribų funkciją?
16. Naudokite automatinius testavimo įrankius, tokius kaip Jest ir Enzyme for React arba Jasmine and Karma for Angular. Imituokite paspaudimų įvykius ir patikrinkite, ar elementai veikia taip, kaip tikėtasi.
17. Ar galiu dinamiškai pridėtiems elementams pritaikyti išorinio paspaudimo aptikimą?
18. Taip, įsitikinkite, kad įvykių klausytojas yra nustatytas tvarkyti dinamiškai pridėtus elementus. Naudokite įvykių delegavimą elementų, kurie pridedami po pradinio įkėlimo, įvykiams valdyti.

Apibendrinant išorinio paspaudimo aptikimo metodus

Paspaudimų išorės aptikimo įtraukimas į žiniatinklio programas žymiai pagerina vartotojo sąveiką. Nesvarbu, ar naudojate jQuery, Vanilla JavaScript ar React, pateikti sprendimai padeda efektyviai valdyti dinaminius elementus. Suprasdami ir taikydami šiuos metodus, užtikrinate, kad meniu ir režimai veiktų nuspėjamai, o tai pagerins bendrą vartotojo patirtį. Šis metodas ne tik supaprastina sąsają, bet ir palaiko prieinamumą, užtikrinant, kad visi vartotojai galėtų sklandžiai sąveikauti su jūsų žiniatinklio programa.