如何阻止内联onclick事件并稍后在自己的Click侦听器中调用它？

Question

如何阻止按钮的嵌入式onclick事件并稍后在自己的Click侦听器中调用该onclick中定义的函数？

我尝试注入一些应在调用按钮的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>

应当指出的是，这很不客气。如果可能的话，我强烈建议从HTML中删除内联事件处理程序。