javascript - 如何阻止内联 onclick 事件并稍后在自己的点击监听器中调用它？

Question

如何阻止按钮的内联 onclick 事件并稍后在我自己的点击监听器中调用在该 onclick 中定义的函数？

我尝试注入(inject)一些应该在按钮的 onclick 代码被调用之前执行的代码。

function doSomething(el) {
  console.log("doSomething was called...");
}

jQuery("#test").click(function(e) {
  e.preventDefault();
  console.log("click listener called...");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="test" onclick="doSomething(this)">Submit</button>

Answer 1

您可以通过其 onclick 属性从元素中获取对原始内联处理程序的引用，然后您可以将其重置为 null。然后您可以在需要时从您自己的 jQuery 事件处理程序中调用原始内联函数，如下所示:

var test = document.getElementById('test');
var originalInlineClickHandler = test.onclick;
test.onclick = null;

function doSomething(el) {
  console.log("doSomething was called...");
}

$(function() {
  jQuery("#test").click(function(e) {
    e.preventDefault();
    console.log("click listener called...");
    originalInlineClickHandler();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="test" onclick="doSomething(this)">Submit</button>

应该注意的是，这是相当 hacky 的。如果可能，我强烈建议从 HTML 中删除内联事件处理程序。