CODEWITHSUNDEEP
javascriptmootools
Rupert Madden-Abbott
Rupert Madden-Abbott

Reputation: 13298

How can I stop a default event when using a named function in addEvent?

Normally, if I wish to stop a default event in mootools I can do this:

$('form').addEvent('submit', function(e) {
    e.stop();

    //Do stuff here
    });

However, I don't like using an anonymous function in events because I often want to reuse the code. Lets say I have a validate function. I could do this:

$('form').addEvent('submit', validate);

which works fine until I want to stop the default event. validate obviously doesn't know what e is so I can't just do e.stop(). Also I've tried passing the event as a variable to validate but whenever I use a named function with parameters, the function gets called automatically on domready, rather than on the event firing. Even worse, an error is thrown when the event is fired.

What am I doing wrong?

UPDATE: Here is the validate function in full, just in case. However, since the error is occurring after the first line, I doubt anything after is being called so it is probably irrelevant.

var validate = function(e) {
    e.stop();

    if(this.get('tag') === 'form') {
        this.getElements('input.text').each(validate);
        }
    else {
        element = this;
        div = element.getParent();
        input = element.get('value');
        filter = JSON.decode(div.get('filter'));

        if(!filter.some(function(value, key) {
            if(value === 'required') if(!setAndNotEmpty(element, input)) return true;
            if(value === 'email') if(!isEmail(element, input)) return true;
            if(value === 'date') if(!isDate(element, input)) return true;
            if(value === 'time') if(!isTime(element, input)) return true;
            if(key === 'chars') if(!charsLessThan(element, input, value)) return true;
            if(key === 'words') if(!wordsLessThan(element, input, value)) return true;
            return false;
            })) setFault('', element);
        }
    }

Upvotes: 0

Views: 571

Answers (3)

Jonathan Czitkovics
Jonathan Czitkovics

Reputation: 1614

bindWithEvent Changes the scope of this within the target function to refer to the bind parameter. It also makes "space" for an event. This allows the function to be used in conjunction with Element:addEvent and arguments.

preventDefault Cross browser method to prevent the default action of the event.

function validate(e)
{
    e.preventDefault();

    if(this.get('tag') === 'form') {
    this.getElements('input.text').each(validate);
    }
    else {
        element = this;
        div = element.getParent();
        input = element.get('value');
        filter = JSON.decode(div.get('filter'));

    if(!filter.some(function(value, key) {
        if(value === 'required') if(!setAndNotEmpty(element, input)) return true;
        if(value === 'email') if(!isEmail(element, input)) return true;
        if(value === 'date') if(!isDate(element, input)) return true;
        if(value === 'time') if(!isTime(element, input)) return true;
        if(key === 'chars') if(!charsLessThan(element, input, value)) return true;
        if(key === 'words') if(!wordsLessThan(element, input, value)) return true;
        return false;
        })) setFault('', element);
}

$('form').addEvent('submit', validate.bindWithEvent(this));

Pretty self explanitory when you see the words prevent default next to each other. So when you submit a form the page will not go to your action.

Upvotes: 0

Lynn
Lynn

Reputation: 160

$('form').addEvent('submit', function(e) {
    e.stop();

    //Do stuff here
    }

I don't know if this is part of your issue, but watch your () in addEvent arguments. 

$('form').addEvent('submit', function(e)) {

Your 'e' argument wasn't properly closed off in the first line.

Upvotes: 0

Graza
Graza

Reputation: 5050

you need to declare "validate" as follows:

function validate(e){
}

Then you can use e.stop()

function validate(e){
    e.stop();
}

$('form').addEvent('submit', validate);

of note is that in jQuery, you can also return a result from a method to stop propogation. I'm not sure if mootools allows this, but you could possibly do this by:

function validate(e){
    return false;
}

$('form').addEvent('submit', validate);

To answer the "what am I doing wrong" part - you're simply misunderstanding what is happening when you pass in an anonymous method. Passing an anonymous method function(e) {} is not causing e to be passed, it is simply defining the name of the first argument to be passed in. The event object will be passed into the method whether or not the method names the argument, hence you will find that the following would also work:

function validate(){
    arguments[0].stop();
}

$('form').addEvent('submit', validate);

Upvotes: 1

Related Questions