Question

通常，如果我想在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);
        }
    }

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

Answer 2

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

    //Do stuff here
    }

我不知道这是否是您的问题的一部分，但在addEvent参数中观察您的（）。

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

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

Answer 3

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

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

3 个答案: