HI there,
this is a little sticky situation and I need some advice.
I have a couple of href's like this, across my project.
<a class="not-allowed" href="javascript:void(0)" onclick="showSettingDiv();">Change</a>
<a class="" href="javascript:void(0)" onclick="DeleteSettingDiv();">Delete</a>
Depending on the type of user logged in, I have to have some links do nothing and trigger something else.
I have this function to make that happen:
$('.not-allowed').each(function (e) {
$(this).click(function (e) {
e.preventDefault();
alert("you dont have permission");
})
});
This does fire up the alert, however, it also executes my onclick function too. is there a way I Can stop all javascript functions and execute just this above one?
I realized I could just use .removeAttr() but I am not sure if thats the best way. I mean I might have buttons to restrict or checkbox and radio button to disable.
e.preventDefault will not take care of all that I guess. Anyway, How do I prevent all javascript functions ?
Thanks.
HI there,
this is a little sticky situation and I need some advice.
I have a couple of href's like this, across my project.
<a class="not-allowed" href="javascript:void(0)" onclick="showSettingDiv();">Change</a>
<a class="" href="javascript:void(0)" onclick="DeleteSettingDiv();">Delete</a>
Depending on the type of user logged in, I have to have some links do nothing and trigger something else.
I have this function to make that happen:
$('.not-allowed').each(function (e) {
$(this).click(function (e) {
e.preventDefault();
alert("you dont have permission");
})
});
This does fire up the alert, however, it also executes my onclick function too. is there a way I Can stop all javascript functions and execute just this above one?
I realized I could just use .removeAttr() but I am not sure if thats the best way. I mean I might have buttons to restrict or checkbox and radio button to disable.
e.preventDefault will not take care of all that I guess. Anyway, How do I prevent all javascript functions ?
Thanks.
Share Improve this question asked Mar 4, 2011 at 14:17 iamseriousiamserious 5,47512 gold badges42 silver badges62 bronze badges 3-
The only way to prevent the
onclickfunction to fire is to remove it. – Felix Kling Commented Mar 4, 2011 at 14:19 - 1 What happens if someone looks at the page source, sees what the onclick attribute was at page load time, and just punches that url/function call into the address bar? They'll have bypassed your security system and call the function anyways. – Marc B Commented Mar 4, 2011 at 14:20
- @Marc B - server side validation is already taken care of. Infact, the url would be "javascript:void(0)" if the css class is "not-allowed". In case someone remembers it form the time it was allowed, (say, book mark) that redirects them to different page, if its button click, redirects them to forbidden page etc. I am just trying to make it look user friendly with qTip. – iamserious Commented Mar 4, 2011 at 16:43
4 Answers
Reset to default 4Yes. It is called Capture mode. It works on DOM-patible browsers. Check out if your JS framework makes this function available for you.
If the capturing EventListener wishes to prevent further processing of the event from occurring it may call the stopProgagation method of the Event interface.
A quick example:
<html>
<body>
<button class="not-allowed" id="btn1" onclick="alert('onclick executed');">BTN1</button>
<button id="btn2" onclick="alert('onclick executed');">BTN2</button>
<script type="text/javascript">
document.addEventListener("click", function (event) {
if (event.target.className.indexOf("not-allowed") > -1) {
event.stopPropagation(); // prevent normal event handler form running
event.preventDefault(); // prevent browser action (for links)
}
}, true);
</script>
</body>
<html>
.preventDefault() does not have an affect on inline event handlers. You would need to remove the functionality pletely. Give this a shot:
$('.not-allowed').each(function(i, elem) {
elem.onclick = null;
$(this).click(function (e) {
e.preventDefault();
alert("you dont have permission");
})
});
Simplified example on jsfiddle: http://jsfiddle/cJcCJ/
You could bind the click event on a parent element and then bind another click event on the "inactive" elements which will call e.stopPropagation(); to prevent the event from bubbling up to the parent element.
Another solution would be giving the disabled elements a class and doing if($(this).hasClass('disabled')) return; in the handler.
You will need to have to modify the function(s) in onclick (showSettingDiv, DeleteSettingDiv) to check for the permissions, too.
BTW, make sure that you don't only check permissions in JavaScript, you must also do it server-side, or it's very easy to manipulate.