javascript - 在浏览器中，如何检测与按钮交互触发了什么事件？

Question

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

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

我相信幕后有一些 JavaScript 可以操纵表格的外观。

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

<小时/>

更新

按照建议，我尝试在 Firefox 中重现该问题。

问题似乎存在，但方式略有不同，请参阅随附的动画屏幕截图。

我感觉问题可能出在 bootstrap 用于在 DOM 中注入(inject)元素的 popper.js 中。

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

与此同时，我正在尝试使用普通 Bootstrap 重新创建按钮。祝我好运。

<小时/>

进一步更新

看起来 popper.js 使用 css 规则 overflow: [something]; 寻找最接近的父级，并从中检测下拉位置。通过在某些浏览器中这样做(Chrome 的做法与 Firefox 有所不同，据我所知)，即使没有任何内容可滚动到，也会出现滚动条，因此会出现空白区域。

我采取的解决方案是避免使用 popper.js 并使用自定义组件。不太理想，但暂时可以。

感谢大家的贡献。

Answer 1

我首先使用 Firefox 的开发工具来检查 DOM。我之所以说 Firefox 是因为它有一个很酷的功能，可以向您显示与该元素绑定(bind)的任何事件。请参阅this了解详情

它能够检测以下事件:

• 标准 DOM 事件
• jQuery 事件
• react 事件