MooTools Tip: Event.stop
Events are a huge part of JavaScript because so much of our JavaScript is triggered by the user's actions. Quite frequently we will assign a listener to a link and immediately want the default click action stopped. For example:
$('myLink').addEvent('click',function(e) {
e.stop();
//do stuff
});
The above code works great but there's one small hole I sometimes run into. On rare occasion I feel the need to trigger an event on an element:
$('myLink').fireEvent('click');
The problem is that the Event object is not given when an event is triggered using Element.fireEvent. The way to prevent any problems is an easy if check:
$('myLink').addEvent('click',function(e) {
if(e) e.stop();
//do stuff
});
Voila. The safe way to stop events!
![Write Better JavaScript with Promises]()
You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...
![An Interview with Eric Meyer]()
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
![Create a CSS Cube]()
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit...
![MooTools Window Object Dumping]()
Ever want to see all of the information stored within the window property of your browser? Here's your chance.
The XHTML
We need a wrapper DIV that we'll consider a console.
The CSS
I like making this look like a command-line console.
The MooTools JavaScript
Depending on what you have loaded...
Nice one, thanks.
I was using e.preventDefault()
:)
Doesn’t “return false;” handle this just as well (assuming you’re only adding one function to the event)?
Bob: http://blog.calyptus.eu/seb/2009/07/why-you-shouldnt-return-false-in-mootools-event-handlers/
I’m using
new Event(e).stop();nice trick,
I was facing this problem a lot of them,
Thanks.
@David Walsh: Thanks, that’s good info. I hadn’t run into that as an issue, but will keep this in mind going forward.
I do this all the time, it’s always nice to see other developers handling it the same way.
I prefer the syntax, considering it saves a whole byte:
&& e.stop();Great solution. I spent a day trying to find a solution on similar problem. David you can’t imagine how much I love your blog.
Granted you may have some special reason for fake-firing an event in which case your solution is fine. But more generally a better practise is to have your event handler call a function. So if you need to make that function happen, just call your function from code rather than faking the event and tripping the event handler in a fake way. Maybe you can give an example of when it’s not possible to use my suggestion?
Thanks,
Paul S
@Paul Schwarz: Your solution require to remember what function is connected to event. Sometimes it’s anonymous functions and you can’t call it directly. Little example:
//add action to all links on page $$('a').addEvent('click', function (e) {alert('My href is'+this.get('href'));}); $$('a')[0].fireEvent('click');@Paul Schwarz: Another example is, you can have plugins on page that do something with your elements, and don’t have access to this functions. It can be more that one function connected to element, and from other sources than yours. So basically calling: myelement.fireEvent you will call all functions attached to the event, and you don’t have to remember or search for it.
e.stop();works for me as well. What I am looking for is a way to kill all the events (never to fire again). Would help a lot to deal with app “crashes” when timers and mouse, etc. events are involved.