JS阻止函数作为onclick事件运行

Question

I would like to disable a certain function from running as an onclick event.

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

Here, I would like to disable myfunc1, not myfunc2. Actually I want to disable myfunc1 from the whole page, but anyway this is the only thing that I need.

I have no control over the page and I am using userscript or other script injection tools to achieve this.

What I've tried:

1. Redefining the function after the page has loaded: I've tried adding an event listener to an event DOMContentLoaded with function(){ myfunc1 = function(){}; } This seems to be working, but in a fast computer with fast internet connection, sometimes it runs before the myfunc1 is defined (in an external js file that is synchronously loaded). Is there any way that I can guarantee that the function will be executed after myfunc1 is defined?

2. Is there any way that I can 'hijack' the onclick event to remove myfunc1 by its name?

Answer 1

You should use event listeners, and then you would be able to remove one with removeEventListener . If you can't alter the HTML source you will need something dirty like

 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> 

Or maybe you prefer hijacking the function instead of the event handler:

 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

Another way this could be done is using Jquery and setting the onlick propery on the anchor tag to null. Then you could attach a click function with just myfunc2() attached.

$(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>

You can see the codepen here - http://codepen.io/anon/pen/BLBYpO

Answer 3

Perhaps you are into 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);
    });
});

Where in the variable $btn gets all the button element with an onclick attribute that contains funcOne() .

In your case, this would be the function you would like to remove on the attribute eg, myfunc1(); .

Now that you have selected all of the elements with that onclick function. Loop them and get there current attribute value and remove the function name by replacing it with an empty string.

Now that you have the value which does not contain the function name that you have replace, you can now update the onclick attribute value with the value of newBtnClickAttr .

Check this Sample Fiddle