在addEvent中使用命名函数时如何停止默认事件?

时间:2010-04-15 16:42:07

标签: javascript mootools

通常,如果我想在mootools中停止默认事件,我可以这样做:

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

    //Do stuff here
    });

但是,我不喜欢在事件中使用匿名函数,因为我经常想重用代码。假设我有一个验证功能。我能做到这一点:

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

在我想要停止默认事件之前工作正常。验证显然不知道e是什么,所以我不能只做e.stop()。此外,我已经尝试将事件作为变量传递给验证,但每当我使用带参数的命名函数时,函数会在domready上自动调用,而不是在事件触发时调用。更糟糕的是,事件被触发时会引发错误。

我做错了什么?

UPDATE:以下是完整的验证功能,以防万一。但是,由于错误发生在第一行之后,我怀疑在被调用之后有什么事情,所以它可能是无关紧要的。

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

3 个答案:

答案 0 :(得分:1)

您需要按如下方式声明“验证”:

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

答案 1 :(得分:0)

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

    //Do stuff here
    }

我不知道这是否是您的问题的一部分,但在addEvent参数中观察您的()。

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

您的'e'参数未在第一行中正确关闭。

答案 2 :(得分:0)

bindWithEvent在目标函数中更改this的范围以引用bind参数。它也为活动创造了“空间”。这允许该函数与Element:addEvent和arguments。

一起使用

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时,相当自我解释。因此,当您提交表单时,页面将不会执行您的操作。