Javascript 在浏览器中,如何检测通过与按钮交互触发的事件?

Javascript 在浏览器中,如何检测通过与按钮交互触发的事件?,javascript,vue.js,dom,bootstrap-4,popper.js,Javascript,Vue.js,Dom,Bootstrap 4,Popper.js,我正在使用vue、引导4和引导vue 我正试图修复当我点击按钮时出现的一个视觉错误(参见附件中的动画截图)。 通过查看表的底部可以看到bug,它的底部不应该有额外的空白 我相信有一些JavaScript在幕后操纵着表的外观 当我将指针移到“下载”按钮上时,如何找到触发mouseover的函数 更新 按照建议,我尝试在Firefox中复制这个问题 这个问题似乎存在,但方式略有不同,请参见随附的动画截图 我感觉问题可能出在bootstrap用来在DOM中注入元素的popper.js中 “下载”按

我正在使用vue、引导4和引导vue

我正试图修复当我点击按钮时出现的一个视觉错误(参见附件中的动画截图)。 通过查看表的底部可以看到bug,它的底部不应该有额外的空白

我相信有一些JavaScript在幕后操纵着表的外观

当我将指针移到“下载”按钮上时,如何找到触发mouseover的函数


更新

按照建议,我尝试在Firefox中复制这个问题

这个问题似乎存在,但方式略有不同,请参见随附的动画截图

我感觉问题可能出在bootstrap用来在DOM中注入元素的popper.js中

“下载”按钮是使用bootstrap vue构建的,因此它可能是从中添加的任何内容

与此同时,我正在尝试用香草引导重新创建按钮。祝我好运


进一步更新

似乎popper.js使用css规则
overflow:[something]查找最接近的父级
并从中检测下拉位置。通过在某些浏览器中这样做(Chrome与Firefox、AFAIK的做法不同),即使没有可滚动的内容,也会显示滚动条,因此出现空白

我提出的解决方案是避免使用popper.js,而是使用定制组件。不理想,但暂时可以


感谢大家的贡献。

我首先使用Firefox的开发工具来检查DOM。我之所以说firefox是因为它有一个很酷的特性,可以向您显示绑定到该元素的任何事件。有关详细信息,请参阅

它能够检测以下事件:

  • 标准DOM事件
  • jQuery事件
  • 反应事件

首先,我会检查HTML并观察是什么导致了布局的变化,然后寻找导致布局变化的原因的参考,而不是反过来谢谢,@CertainPerformance我已经检查了DOM,我看到按钮及其下拉菜单被注入到DOM树中,但我没有看到表本身有任何变化。我倾向于认为一定有css的副作用。因此,我想看看该函数的实际运行情况。使用firebug/firefox开发工具可能会带来更好的运气。它们有一个很酷的特性,可以让你看到什么事件与什么绑定在一起。Chrome没有这个现成的。@mwilson这很有趣。你有我可以看的一些文档的链接吗?好的,我是按照@mwilson的建议找到这个事件的。
popper.js
中有一个函数,该函数将滚动条添加到具有
溢出的最近父级:scroll在本例中为表。如果我删除了使表可滚动的类,那么主体将获得滚动条。奇怪。Chrome也有事件检测。好吧,我是根据你提到的发现事件的。
popper.js
中有一个函数,该函数将滚动条添加到具有
溢出的最近父级:scroll在本例中为表。如果我删除了使表可滚动的类,那么主体将获得滚动条。奇怪。@lawrencerone你能指出一个链接到如何在chrome中检查事件吗?:)@Adriano我大约99.9%相信chrome开发工具没有能力看到哪些事件与哪些事件关联。因此这里提到了firefox。我使用chrome作为开发/正常使用的主要浏览器。如果此功能存在,则它将非常隐藏。不过可能有一些扩展(这可能就是劳伦斯·切隆所说的)。此外,友好的提醒您投票选出有帮助的答案。