In browser, how to detect what event is triggered by interacting with a button?

Question

I'm using vue, bootstrap 4, and bootstrap-vue.

I'm trying to fix a visual bug that appears when I click on a button (see attached animated screenshot). the bug is visible by looking at the bottom part of the table, it shouldn't have additional whitespace at the bottom.

I believe there is some JavaScript under the hood that manipulates the appearance of the table.

How can I find the function that triggers onMouseOver when I move the pointer over the `"download" button?

---

UPDATE

By following the advice I've tried to replicate the issue in Firefox.

The issue seems being there but in a slightly different fashion, see attached animated screenshot.

I have a sense the problem might be in the popper.js used by bootstrap to inject elements in the DOM.

The "download" button has been built by using bootstrap-vue, so it might be anything added from that.

In the meantime I'm trying to recreate the button with vanilla bootstrap. Wish me luck.

---

Further Update

It seems like popper.js looks for the closest parent with the css rule overflow: [something]; and detects the dropdown position from that. By doing so in some browsers (Chrome does it differently than Firefox, AFAIK) it makes the scrollbar appear even though there is nothing to scroll to, hence the empty white space.

The solution I put in place is to avoid to use popper.js and use a custom made component instead. Not ideal, but it will do for time being.

Thanks everyone for your contribution.

Answer 1

I'd start by using Firefox's dev tools to inspect the DOM. The reason why I say firefox is because it's got a cool feature that will show you any events bound to that element. See this for details

It's capable of detecting the following events:

• Standard DOM Events
• jQuery Events
• React Events