在浏览器中，如何通过与按钮交互来检测触发的事件？

Question

我正在使用vue，bootstrap 4和bootstrap-vue。

我正在尝试修复当我点击按钮时出现的视觉错误（请参阅随附的动画屏幕截图）。通过查看表的底部可以看到错误，它底部不应该有额外的空格。

我相信引擎盖下有一些JavaScript来操纵表的外观。

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

UPDATE

通过遵循我试图在Firefox中复制问题的建议。

问题似乎存在，但是以略微不同的方式，请参阅附加的动画截图。

我有一个问题，问题可能出在bootstrap用于在DOM中注入元素的popper.js中。

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

与此同时，我正在尝试重新创建带有香草引导的按钮。祝我好运。

进一步更新

似乎popper.js使用css规则overflow: [something];查找最近的父级，并从中检测下拉位置。通过在某些浏览器中执行此操作（Chrome与Firefox，AFAIK不同），即使没有任何内容可滚动，也会使滚动条显示，因此空白空间。

我实施的解决方案是避免使用popper.js并使用自定义组件。不理想，但它会暂时做到。

谢谢大家的贡献。

Answer 1

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

它能够检测以下事件：