Ինչպես սովորեցնել 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-ին իրադարձությունները մշակել, երբ ինտերակտիվությունը անջատված է?