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.
![fetch API]()
One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for. We've done well to create elegant APIs around XHR but we know we can do better. Our effort to...
![5 More HTML5 APIs You Didn’t Know Existed]()
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...
![Create Snook-Style Navigation Using MooTools]()
Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools.
The Images
These are the same...
![Duplicate the jQuery Homepage Tooltips]()
The jQuery homepage has a pretty suave tooltip-like effect as seen below:
The amount of jQuery required to duplicate this effect is next to nothing; in fact, there's more CSS than there is jQuery code! Let's explore how we can duplicate jQuery's tooltip effect.
The HTML
The overall...
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; })