防止来自外部javascript文件的内联onclick

Question

Is there any way to prevent inline onclick attributes from an external js file?

<button id="myButton" type="button" onclick="alert('Dont show me please!');" >Click me</button>

In script.js:

var mybutton = document.getElementById("myButton").addEventListener("click", preventIt);

function preventIt(e){
  console.log('click event...');
  e.preventDefault();
}

Assume that we can't change html markup.

Answer 1

您可以删除onclick属性，如下所示：

document.getElementsByID("myButton").removeAttribute("onclick");

Answer 2

Remove

window.onload=function() {
  document.getElementById("myButton").removeAttribute("onclick");
}

or replace:

window.onload=function() {
  document.getElementById("myButton").onclick=function() {
     alert("No you cannot");
  }
}

Answer 3

I think that the fastest way to do this is to just clone the node, which will remove all event listeners:

var old_element = document.getElementById("btn");
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);

Just be careful, as this will also clear event listeners on all child elements of the node, so if you want to preserve that you'll have to resort to explicitly removing listeners one at a time. and add button after that.

Answer 4

i think this should work

function preventIt(e) {
   e = e || window.event;
   console.log(e.type);
   if (e.preventDefault) {
      e.preventDefault();
   } else {
      e.returnValue = false;
   }
   return false;
}

var myButton = document.getElementById("myButton");
myButton.addEventListener('click', preventIt);