Как предотвратить событие щелчка от дочерних элементов, не отображаемых с помощью vue, всплывать к родительскому элементу

Ссылка на коден

Предыдущий код позволяет изменять размер строк таблицы vuetify. К сожалению, с помощью sortable: true событие щелчка из div "hanlde" всплывает до строки заголовка и запускает функцию toggleSort из заголовков таблицы vuetify по умолчанию. Я не хочу переопределять слот заголовков, поэтому не могу использовать @click.self = "toggleSort", а добавление e.stopPropagation() к addEventListener не работает. Есть идеи?

Вы можете заметить проблему, когда перетаскиваете курсор достаточно далеко, чтобы вывести курсор за пределы дескриптора div, прежде чем отпустить кнопку мыши. Вот видео: https://thewikihow.com/video_WsLPF-lpdDc

Если перетаскивать медленно и удерживать указатель мыши на отображаемой синей полосе, проблема не возникнет.

— 12.07.2024 04:50

javascript vue.js events vuejs3 vuetify.js

11.07.2024 15:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто временно отключите сортировку при перетаскивании:

--- a/app.vue
+++ b/app.vue
@@ -9,20 +9,21 @@
 <script setup lang = "ts">
   import { ref, nextTick } from 'vue'

+  const sortable = ref(true)
   const headers = ref([
     {
       title: 'Dessert (100g serving)',
       align: 'end',
-      sortable: true,
+      sortable,
       value: 'name',
       width: undefined,
       maxWidth: undefined,
     },
-    { title: 'Calories', sortable: true, align: 'end', value: 'calories' },
-    { title: 'Fat (g)', sortable: true, align: 'end', value: 'fat' },
-    { title: 'Carbs (g)', sortable: true, align: 'end', value: 'carbs' },
-    { title: 'Protein (g)', sortable: true, align: 'end', value: 'protein' },
-    { title: 'Iron (%)', sortable: true, align: 'end', value: 'iron' },
+    { title: 'Calories', sortable, align: 'end', value: 'calories' },
+    { title: 'Fat (g)', sortable, align: 'end', value: 'fat' },
+    { title: 'Carbs (g)', sortable, align: 'end', value: 'carbs' },
+    { title: 'Protein (g)', sortable, align: 'end', value: 'protein' },
+    { title: 'Iron (%)', sortable, align: 'end', value: 'iron' },
   ])
   const desserts = ref([
     {
@@ -188,6 +189,8 @@
           divEvent: MouseEvent | undefined

         div.addEventListener('mousedown', function (e) {
+          sortable.value = false
+
           divEvent = e
           curCol = (e.target as HTMLDivElement).parentElement as HTMLTableColElement
           pageX = e.pageX
@@ -252,6 +255,8 @@
             divEvent = undefined
           }
         })
+
+        setTimeout(() => sortable.value = true, 0)
       }

       function createDiv(height: number): HTMLDivElement {

Это умный обходной путь, но удаление свойства сортировки на всей таблице приводит к автоматическому изменению ее размера для больших таблиц. Однако будет достаточно, если вы хирургическим путем отключите сортируемую опору в крайнем левом столбце. Я подожду, чтобы увидеть, сможет ли кто-нибудь найти причину проблемы, в противном случае я приму ваш ответ. Спасибо!

— 12.07.2024 09:15

12.07.2024 05:16