如何阻止內聯onclick事件並稍后在自己的點擊監聽器中調用它？

Question

如何阻止按鈕的內聯onclick事件並稍后在我自己的單擊偵聽器中調用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> 

應該指出，這是相當hacky。 如果可能的話，我強烈建議從HTML中刪除內聯事件處理程序。

Answer 2

您可以為hover或mouseDown創建一個事件，但這些事件都不會保證會出現click事件。 如果要完全刪除內聯onclick，可以使用element.onclick = null;類的內容在其中一個事件中的元素上取消設置element.onclick = null; 。