Чӣ гуна омӯзонидани Vue барои коркарди ҳодисаҳо вақте…

Дар Vue наметаъан ҳеҷ гуна ҳодисаҳоро мустақиман дар унсурҳое бо pointer-events: none коркард кардан мумкин нест, зеро онҳо дар коркарди ҳодисаҳои муш ва тамос иштирок намекунанд. Барои гузаштан аз ин масъала, усулҳои алтернативӣ истифода мешаванд:

Пас кардани ҳодиса ба унсури падар: Нестуҳфоии ғайриинтерактивиро дар дохили унсури падар ҷойгир кунед, ки ҳодисаҳоро гӯш мекунад ва онҳоро делегат мекунад.

<template>
  <div @click="handleEvent">
    <div style="pointer-events: none;">Унсури ғайриинтерактивӣ</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleEvent(event) {
      // Логикаи коркарди ҳодиса, масалан, бар асоси event.target
      console.log('Ҳодиса дар падар гирифта шуд', event.target);
    }
  }
}
</script>

Истифодаи оверлей: Истифодаи унсури интерактивӣ ва шаффоф дар болои унсури ғайриинтерактивӣ.

<template>
  <div style="position: relative;">
    <div style="pointer-events: none;">Унсури ғайриинтерактивӣ дар зери оверлей</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() {
      // Логикаи коркарди клик дар болои оверлей
      console.log('Клик дар болои оверлеи шаффоф');
    }
  }
}
</script>

Илтимосии ҳодисаҳои программавӣ: Истифодаи JavaScript барои муайян кардани ҷойгиршавии курсор ё тамос ва даъвати логикаи дахлдор, имитатсия кардани коркарди ҳодиса. Ин усул мураккабтар аст ва ниёз ба ҳисобҳои дақиқи ҷойгиршавии унсурҳо дорад.

// Намунаи псевдокод барои муайян кардани клик дар унсури ғайриинтерактивӣ
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('Кликии барномавӣ муайяншуда дар унсури ғайриинтерактивӣ');
    // Логикаи шумо барои коркарди ҳодиса
  }
});

Интихоби усул вобаста ба вазифаи мушаххас ва сохтори DOM мебошад. Пас кардани ҳодиса ба унсури падар одатан осонтарин ва беҳтарин усул ҳисоб мешавад.

Чӣ гуна омӯзонидани Vue барои коркарди ҳодисаҳо вақте ки ҳамкории фаъол нест?