Как научить Vue обрабатывать события при отключенной интеракции?

В Vue напрямую обрабатывать события на элементах с pointer-events: none нельзя, так как они не участвуют в обработке событий мыши и касаний. Для обхода этого используются альтернативные подходы:

1. Передача события родительскому элементу: Разместить неинтерактивный элемент внутри родительского, который будет слушать события и делегировать их.

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

2. Использование оверлея: Разместить интерактивный, прозрачный элемент поверх неинтерактивного.

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

3. Программная имитация событий: Использовать 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. Передача события родительскому элементу часто является наиболее простым и предпочтительным подходом.