Kaip išmokyti Vue apdoroti įvykius, kai sąveika yra…

Vue tiesiogiai apdoroti įvykius elementuose su pointer-events: none negalima, nes jie nedalyvauja pelės ir liečiamojo įvykių apdorojime. Šią problemą galima išspręsti naudojant alternatyvius metodus:

Įvykio perdavimas tėviniam elementui: Neinteraktyvų elementą įdėti viduje tėvinio elemento, kuris klausys įvykių ir juos deleguos.

<template>
  <div @click="handleEvent">
    <div style="pointer-events: none;">Neinteraktyvus elementas</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleEvent(event) {
      // Įvykio apdorojimo logika, pavyzdžiui, remiantis event.target
      console.log('Įvykis pagautas tėviniame elemente', event.target);
    }
  }
}
</script>

Perdangos naudojimas: Interaktyvus, permatomas elementas virš neinteraktyvaus.

<template>
  <div style="position: relative;">
    <div style="pointer-events: none;">Neinteraktyvus elementas po perdanga</div>
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); cursor: pointer;" @click="handleOverlayClick"></div>
  </div>
</template>

<script>
export default {
  methods: {
    handleOverlayClick() {
      // Perdangės paspaudimo apdorojimo logika
      console.log('Paspausta permatoma perdanga');
    }
  }
}
</script>

Programinis įvykių imituojamas: Naudoti JavaScript, kad nustatytumėte pelės žymeklio ar liečiamos vietos poziciją ir iškviestumėte atitinkamą logiką, imituojant įvykio apdorojimą. Šis metodas yra sudėtingesnis ir reikalauja tikslių elementų pozicijų skaičiavimų.

// Pavyzdinis pseudokodas, nustatantis paspaudimą ant neinteraktyvaus elemento
document.addEventListener('click', function(event) {
  const element = document.getElementById('my-non-interactive-element');
  const rect = element.getBoundingClientRect();

  if (event.clientX >= rect.left && event.clientX <= rect.right &&
      event.clientY >= rect.top && event.clientY <= rect.bottom) {
    console.log('Programiniu būdu nustatytas paspaudimas ant neinteraktyvaus elemento');
    // Jūsų apdorojimo logika
  }
});

Pasirinkimas priklauso nuo konkrečios užduoties ir DOM struktūros. Dažniausiai paprasčiausias ir pageidautinas būdas yra perduoti įvykį tėviniam elementui.

Kaip išmokyti Vue apdoroti įvykius, kai sąveika yra išjungta?