如何检查单击时不起作用的按钮元素上的侦听器？答案

【问题标题】：How can one check the listeners on a button element that isn't working when clicked?如何检查单击时不起作用的按钮元素上的侦听器？
【发布时间】：2019-05-07 15:03:38
【问题描述】：

Earlier，我遇到了嵌套 b 输入 event modifier 无法正常工作的问题。我必须像这样插入.native，因为我点击了一个组件：

      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

我现在的问题是b-input 正下方的b-button 在单击时不再起作用。如何解决此问题并看到不再有侦听器在侦听单击事件？我认为这是问题所在，但如果我错了，请纠正/指导我！

我正在寻找give a man a fish and feed him for a day; teach a man to fish and feed him for a lifetime 类型的答案。我可以使用 chrome 开发工具查看在该按钮元素上监听的事件类型吗？

【问题讨论】：

href属性的printCheck是什么意思？
这是一个Vue计算方法
你想通过点击按钮调用那个方法吗？
对不起保龄球联赛！我的错误它在 Vue 中被称为计算，而不是计算。不，它运行一个返回 URL 字符串的方法。

标签： javascript html vue.js google-chrome-devtools

【解决方案1】：

右键单击该元素，然后从菜单中选择Inspect，在 DevTools 的Elements 选项卡中找到该元素。

然后转到侧边栏中的Event Listeners 选项卡，展开click 侦听器。您还可以取消选中“祖先”复选框，这样您就只能看到直接附加到该元素的侦听器，而不是包含元素的侦听器（由于冒泡而接收事件）。

【讨论】：