Prevent Default Event Actions Using MooTools 1.2
Many sweet JavaScript events are trigger by clicking on a link or a submit button. What if you don't want the browser to follow the link? What if you don't want the form to be submitted traditionally? MooTools allows you to prevent the default actions of most elements by using the preventDefault() method.
The Sample XHTML
<p><a href="http://scriptandstyle.com" class="prevent">ScriptAndStyle.com</a></p>
<p><input type="checkbox" class="prevent" /></p>
<p><input type="submit" class="prevent" value="Submit Form" /></p>
The action of any element with the prevent class will be nullified upon click.
The MooTools 1.2 Code
window.addEvent('domready', function() {
$each($$('.prevent'),function(el) {
el.addEvent('click',function(event) {
event.preventDefault();
});
});
});
You can also prevent the browser from allowing image dragging! I did, however, notice that this function did not work correctly on a radio input.
![5 Ways that CSS and JavaScript Interact That You May Not Know About]()
CSS and JavaScript: the lines seemingly get blurred by each browser release. They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely. We have our .js files and our .css, but...
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![MooTools & Printing – Creating a Links Table of Contents]()
One detail we sometimes forget when considering print for websites is that the user cannot see the URLs of links when the page prints. While showing link URLs isn't always important, some websites could greatly benefit from doing so. This tutorial will show you...
![MooTools: Set Style Per Media]()
I'd bet one of the most used MooTools methods is the setStyle() method, which allows you to set CSS style declarations for an element. One of the limitations of MooTools' setStyle() method is that it sets the specific style for all medias.
You can use the
$lambdafunction and a little bit of the Elements-Class magic to make this a one-liner:window.addEvent('domready', function() { //Now every click on one of the .prevent-Elements returns a 'false' and the propagation of the event gets stopped. $$('.prevent').addEvent('click',$lambda(false)); });@thomasd: Sweet tip!
i found that the method that fails the least is:
$("bla").addEvent('click',function(_e){ new Event(_e).preventDefault().stopPropagation(); //alternatively: new Event(_e).stop(); //or very simple in mootools 1.2: return false; })