How can one check the listeners on a button element that isn't working when clicked?

Earlier, I had a problem with a nested b-input's event modifier not functioning correctly. I had to insert a .native like so since I was clicking on a component:

      b-dropdown(text="Actions")
        b-dropdown-item(:href='settlementPdf' target='_blank') Download PDF
        b-dropdown-item
          b-form(inline)
            .row
              .col
                b-input(v-model='checkNumber' @click.native.stop='' placeholder="#123")
                b-button(:href='printCheck' variant="primary" target='_blank') Print Check

My problem now is that the b-button right below the b-input is no longer working when clicked on. How can I troubleshoot this and see that there is no longer a listener listening for a click event? I assume that is the problem, but please correct/direct me if I'm wrong!

I'm looking for a give a man a fish and feed him for a day; teach a man to fish and feed him for a lifetime type of answer. Can I use chrome dev tools to look at the type of events being listened for on that button element?

728x90

1 Answers How can one check the listeners on a button element that isn't working when clicked?

Right-click the element, and select Inspect from the menu to find the element in the Elements tab of DevTools.

Then go to the Event Listeners tab in the sidebar, and expand the click listeners. You can also uncheck the "Ancestors" checkbox so you only see listeners attached directly to that element, rather than listeners on containing elements (which will receive events due to bubbling).

3 months ago