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

Recent Features

  • Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

  • Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event,...

Incredible Demos

  • CSS Counters

    Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole...

  • Morphing Elements Using MooTools and CSS

    Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal. Step 1: The XHTML The block of content that will change is...

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

  • Loading Static Templates for Intern Testing

    I use Intern by SitePen for all of my JavaScript functional testing.  Intern has loads of features other functional test frameworks don't and it's completely Promise-based -- something I got very used to when I used the Dojo Toolkit every day. Async test creation can...

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...