O'Reilly

MooTools Tip: Event.stop

By on  

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!

Track.js Error Reporting

Upcoming Events

Recent Features

  • 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...

  • 9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • dwImageProtector Plugin for jQuery

    I've always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I've always wondered why. I've been told it's easy, which is probably why designers were so quick to adopt it NOT that designers...

  • Adding Events to Adding Events in MooTools

    Note: This post has been updated. One of my huge web peeves is when an element has click events attached to it but the element doesn't sport the "pointer" cursor. I mean how the hell is the user supposed to know they can/should click on...

Discussion

  1. Alex

    Nice one, thanks.
    I was using e.preventDefault()
    :)

  2. Doesn’t “return false;” handle this just as well (assuming you’re only adding one function to the event)?

  3. I’m using new Event(e).stop();

  4. nice trick,
    I was facing this problem a lot of them,
    Thanks.

  5. @David Walsh: Thanks, that’s good info. I hadn’t run into that as an issue, but will keep this in mind going forward.

  6. I do this all the time, it’s always nice to see other developers handling it the same way.

  7. I prefer the syntax, considering it saves a whole byte: && e.stop();

  8. 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.

  9. 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

  10. @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');
    
  11. @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.

  12. Paris

    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.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...