Kris Wallsmith

MooTools: Ignoring the next click

I’m a big fan of MooTools, as I recently tweeted. I typically try to extend this framework as little as possible, since that can be rabbit hole for me, but this method is just too handy to pass by.

The use case I’m working with is distinguishing between a drag/drop interaction and a click interaction on the same element. If you’re dragging an element, the click event will be fired when you drop it, but you may not want to execute the typical click behavior.

Native.implement([Element, Window, Document], {
  ignoreNext: function(type){
    var element = this, events = element.retrieve('events', {});
    var functions = events[type] || { keys: [], values: [] };
    element.removeEvents(type).addEvent(type, function(event){
      event.stop();
      element.removeEvents(type);
      functions.keys.each(function(fn){ element.addEvent(type, fn) });
    });
  }
});

I have this implemented in a drag start handler like so:

element.addEvent('click', function(){ alert('click') }).makeDraggable({
  onStart: function(drag){ drag.ignoreNext('click') },
  onDrop: function(){ alert('drop') }
});

Assuming the Moo team doesn’t change how native events are handled, this gives you a nice reusable method for handling this otherwise brainfart-inducing interaction.