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.
You could remove the onclick attribute like so:
document.getElementsByID("myButton").removeAttribute("onclick");
Remove
window.onload=function() {
document.getElementById("myButton").removeAttribute("onclick");
}
or replace:
window.onload=function() {
document.getElementById("myButton").onclick=function() {
alert("No you cannot");
}
}
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.
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);
