В браузере, как определить, какое событие вызвано взаимодействием с кнопкой? - PullRequest
0 голосов
/ 17 апреля 2019

Я использую vue, bootstrap 4 и bootstrap-vue.

Я пытаюсь исправить визуальную ошибку, которая появляется, когда я нажимаю на кнопку (см. Прикрепленный анимированный скриншот). ошибка видна, если посмотреть на нижнюю часть таблицы: у нее не должно быть дополнительных пробелов внизу .

Я полагаю, что под капотом есть некоторый JavaScript, который управляет внешним видом таблицы.

Как найти функцию, которая запускает onMouseOver, когда я перемещаю указатель над кнопкой "скачать"?

Download button issue in Chrome


UPDATE

Следуя совету, я попытался повторить проблему в Firefox .

Кажется, проблема существует, но немного по-другому, см. Прикрепленный анимированный скриншот.

У меня есть ощущение, что проблема может быть в popper.js, используемом bootstrap для внедрения элементов в DOM.

Кнопка «скачать» была создана с помощью bootstrap-vue, так что это может быть что-нибудь из этого.

Тем временем я пытаюсь воссоздать кнопку с помощью ванильного загрузчика. Пожелай мне удачи.

Download button issue in Firefox


Дальнейшее обновление

Похоже, что popper.js ищет ближайшего родителя с правилом css overflow: [something]; и определяет из этого позицию раскрывающегося списка. Делая это в некоторых браузерах (Chrome делает это не так, как Firefox, AFAIK), он заставляет полосу прокрутки появляться даже при том, что прокручивать нечего, отсюда и пустое пространство.

Решение, которое я выбрал, состоит в том, чтобы не использовать popper.js и использовать вместо него пользовательский компонент. Не идеально, но пока подойдет.

Спасибо всем за ваш вклад.

1 Ответ

1 голос
/ 17 апреля 2019

Я бы начал с использования инструментов разработчика Firefox для проверки DOM. Причина, по которой я говорю firefox, заключается в том, что у него есть классная функция, которая будет показывать вам любые события, связанные с этим элементом. Подробнее см.

Он способен обнаруживать следующие события:

  • Стандартные события DOM
  • jQuery Events
  • Реагировать на события

enter image description here

...