Как я могу остановить событие по умолчанию при использовании именованной функции в addEvent?

Обычно, если я хочу остановить событие по умолчанию в mootools, я могу сделать это:

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

    //Do stuff here
    });

Однако мне не нравится использовать анонимную функцию в событиях, потому что я часто хочу повторно использовать код. Допустим, у меня есть функция проверки. Я мог бы сделать это:

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

который отлично работает, пока я не захочу остановить событие по умолчанию. validate явно не знает, что такое e, поэтому я не могу просто выполнить e.stop(). Также я пытался передать событие как переменную для проверки, но всякий раз, когда я использую именованную функцию с параметрами, функция автоматически вызывается при domready, а не при срабатывании события. Хуже того, при запуске события возникает ошибка.

Что я делаю неправильно?

ОБНОВЛЕНИЕ: Вот функция проверки полностью, на всякий случай. Однако, поскольку ошибка возникает после первой строки, я сомневаюсь, что что-либо после нее вызывается, поэтому, вероятно, это не имеет значения.

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);
        }
    }

javascript mootools
person Rupert Madden-Abbott    schedule 15.04.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

вам нужно объявить "validate" следующим образом:

function validate(e){
}

Затем вы можете использовать e.stop()

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

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

следует отметить, что в jQuery вы также можете вернуть результат из метода, чтобы остановить распространение. Я не уверен, позволяет ли mootools это, но вы могли бы сделать это:

function validate(e){
    return false;
}

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

Чтобы ответить на часть "что я делаю неправильно" - вы просто неправильно понимаете, что происходит, когда вы передаете анонимный метод. Передача анонимного метода function(e) {} не приводит к передаче e, а просто определяет имя первого передаваемого аргумента. Объект события будет передан в метод вне зависимости от того, указаны ли имена методов. аргумент, поэтому вы обнаружите, что следующее также будет работать:

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

$('form').addEvent('submit', validate);
person Graza    schedule 15.04.2010
comment
Здравствуйте и спасибо за ваш ответ. К сожалению, я пробовал это, и это дает мне следующую ошибку: e.stop не является функцией - person Rupert Madden-Abbott; 15.04.2010
comment
Интересно... что произойдет, если вы объявите валидацию как переменную, а не как функцию, например var validate = function(e){...}? Честно говоря, я не вижу причин, по которым мое предложение не сработает, и мне бы очень хотелось увидеть ваше объявление метода проверки - мне это больше кажется, что вы случайно делаете что-то не так, чего мы не можем видеть. - person Graza; 15.04.2010

arrow_upward
0
arrow_downward 

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

    //Do stuff here
    }

Я не знаю, является ли это частью вашей проблемы, но следите за вашим () в аргументах addEvent.

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

Ваш аргумент «e» не был должным образом закрыт в первой строке.

person Lynn    schedule 15.04.2010
comment
На самом деле это не правильно. Конечно, ему нужен лишний ); в конце всего его кода, но уж точно не перед {, и я уверен, что он прекрасно об этом знает, и просто первый раздел его кода не полностью скопировал и вставил в свой пост - person Graza; 15.04.2010
comment
Спасибо, я исправил это в своем вопросе, и он действительно не несет ответственности за исходную проблему. - person Rupert Madden-Abbott; 15.04.2010

arrow_upward
0
arrow_downward

bindWithEvent Изменяет область действия this внутри целевой функции, чтобы ссылаться на параметр привязки. Это также создает «пространство» для мероприятия. Это позволяет использовать функцию в сочетании с Element:addEvent и аргументами.

preventDefault Кроссбраузерный метод для предотвращения действия события по умолчанию.

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));

Довольно понятно, когда вы видите слова prevent default рядом друг с другом. Поэтому, когда вы отправляете форму, страница не перейдет к вашим действиям.

person Jonathan Czitkovics    schedule 15.04.2010