JS阻止函數作為onclick事件運行

Question

我想禁止某個功能作為onclick事件運行。

<a href="#" onclick="myfunc1();myfunc2();"></a>

在這里，我想禁用myfunc1，而不是myfunc2。 實際上，我想從整個頁面禁用myfunc1，但是無論如何，這是我唯一需要的。

我無法控制頁面，並且正在使用用戶腳本或其他腳本注入工具來實現此目的。

我試過的

1. 頁面加載后重新定義功能：我嘗試將事件監聽器添加到事件DOMContentLoaded中，並帶有function（）{myfunc1 = function（）{}; }這似乎可行，但是在具有快速Internet連接的快速計算機中，有時它會在定義myfunc1之前運行（在同步加載的外部js文件中）。 有什么方法可以保證在定義myfunc1之后執行該函數？

2. 有什么方法可以“劫持” onclick事件以通過其名稱刪除myfunc1？

Answer 1

您應該使用事件偵聽器，然后可以使用removeEventListener刪除事件偵聽removeEventListener 。 如果您無法更改HTML源代碼，則將需要一些類似的內容

 function myfunc1() { console.log('myfunc1'); } function myfunc2() { console.log('myfunc2'); } var a = document.querySelector('a[onclick="myfunc1();myfunc2();"]'); a.setAttribute('onclick', 'myfunc2();'); 

 <a href="#" onclick="myfunc1();myfunc2();">Click me</a> 

或者，您可能更喜歡劫持函數而不是事件處理程序：

 function myfunc1() { console.log('myfunc1'); } function myfunc2() { console.log('myfunc2'); } var a = document.querySelector('a[onclick="myfunc1();myfunc2();"]'); var myfunc1_; a.parentNode.addEventListener('click', function(e) { // Hijack if(a.contains(e.target)) { myfunc1_ = window.myfunc1; window.myfunc1 = function(){}; } }, true); a.addEventListener('click', function(e) { // Restore window.myfunc1 = myfunc1_; myfunc1_ = undefined; }); 

 <a href="#" onclick="myfunc1();myfunc2();">Click me</a> 

Answer 2

可以完成此操作的另一種方法是使用Jquery並將錨標記上的onlick屬性設置為null。 然后，您可以僅附加myfunc2（）附加一個單擊函數。

$(document).ready(function () {
  $("a").prop("onclick", null);
  $("a").click(function(){
        myfunc2();
  });
});
function myfunc1() {
  console.log('1');
}
function myfunc2() {
  console.log('2');
}

<a class="test" href="#" onclick="myfunc1();myfunc2();">Example</a>

您可以在此處查看codepen- http: //codepen.io/anon/pen/BLBYpO

Answer 3

也許您喜歡jQuery。

$(document).ready(function(){
    var $btn = $('button[onclick*="funcOne()"]');

    $btn.each(function(){
        var newBtnClickAttr;
        var $this = $(this);
        var btnClickAttr = $this.attr("onclick");

        newBtnClickAttr = btnClickAttr.replace(/funcOne\(\)\;/g, "");

        $this.attr("onclick", newBtnClickAttr);
    });
});

在變量$btn ，所有按鈕元素都帶有包含funcOne()的onclick屬性。

在您的情況下，這就是您想在屬性上刪除的函數，例如myfunc1(); 。

現在，您已經使用該onclick函數選擇了所有元素。 循環它們並獲得當前屬性值，並通過將其替換為空字符串來刪除函數名稱。

現在，您擁有的值不包含您要替換的函數名，現在您可以使用newBtnClickAttr的值更新onclick屬性值。

檢查此樣本小提琴