Vue'ga voqealarni qanday ishlashni o'rgatish mumkin…

Vue'da, pointer-events: none ilə olan elementlərdə birbaşa hadisələri idarə etmək mümkün deyil, çünki onlar siçan və toxunma hadisələrində iştirak etmirlər. Bu problemi aşmaq üçün alternativ yanaşmalar istifadə olunur:

Hadisəni valideyn elementə ötürmək: Valideyn daxilində qarşılıqlı əlaqəsiz element yerləşdirmək, bu element hadisələri dinləyəcək və yönləndirəcək.

<template>
  <div @click="handleEvent">
    <div style="pointer-events: none;">Əlaqəsiz element</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleEvent(event) {
      // Hadisənin işlənməsi üçün məntiq, məsələn, event.target əsasında
      console.log('Valideyn üzərində hadisə tutuldu', event.target);
    }
  }
}
</script>

Overlay istifadə etmək: Əlaqəsiz elementin üzərinə qarşılıqlı əlaqəli və şəffaf element yerləşdirmək.

<template>
  <div style="position: relative;">
    <div style="pointer-events: none;">Overlay altında əlaqəsiz element</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() {
      // Overlay üzərində klik üçün məntiq
      console.log('Şəffaf overlay üzərində klik');
    }
  }
}
</script>

Proqram təminatı ilə hadisələrin simulasyonu: JavaScript istifadə edərək kursor və ya toxunuşun mövqeyini müəyyənləşdirin və müvafiq məntiqi çağırın, hadisənin işlənməsini təqlid edin. Bu metod daha mürəkkəbdir və elementlərin mövqelərinin dəqiq hesablanmasını tələb edir.

// Əlaqəsiz element üzərində klik aşkarlamaq üçün pseudokod nümunəsi
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('Proqram təminatı ilə müəyyən edilmiş klik, əlaqəsiz element üzərində');
    // Sizin məntiqiniz
  }
});

Seçim, konkret tapşırıq və DOM strukturundan asılıdır. Hadisəni valideyn elementə ötürmək ən sadə və üstün tutulan yanaşmadır.

Vue'ga voqealarni qanday ishlashni o'rgatish mumkin, interaksiya o'chirilgan bo'lsa?