使用原型的 Event.observe 返回函数答案

【问题标题】：Return Functions using prototype's Event.observe使用原型的 Event.observe 返回函数
【发布时间】：2011-01-20 20:49:07
【问题描述】：

我正在尝试使用 Prototype 的 Event.observe 函数从使用内联事件触发器迁移到使用事件侦听器。有一些内联命令我不知道如何使用函数调用来处理。

我想搬家：

<form id='formFoo' action='whatever.php' onsubmit="return Foo.verify(this);">

到事件调用：

Event.observe('formFoo', 'submit', Foo.verify);

这当然行不通，因为我需要调用函数的返回值来确定表单是否被提交。

如何使用事件处理程序来做到这一点？

【问题讨论】：

标签： return prototypejs dom-events

【解决方案1】：

最简单的方法可能是原型中的Event.Stop。这对我有用（把它放在任何脚本块中）：

Foo = { verify: function(){ return false } };

Event.observe(window, 'load', function() {
    Event.observe('formFoo', 'submit', function(e){
        if(! Foo.verify($('formFoo'))){
            e.stop();
        }
    });
});

它会停止每一个表单提交；你只需要改变 Foo.verify 来做你想做的事。

解释：当提交事件被触发时，原型向处理程序传递一个原型Event代表该事件的对象，并且该对象上的stop方法阻止提交。剩下的只是设置事件。

次要注意：除其他外，将 Foo.verify 作为处理程序直接传递将导致 verify 被作为函数调用，而不是方法（this 将是调用中的全局对象，而不是 Foo)。这种情况可能没问题 - 如果 verify 不使用 this，你就可以了。不过要注意区别。

【讨论】：

不幸的是，这仍然允许在返回验证函数的结果之前提交表单。这在按钮上工作正常（使用点击事件），但这是一个搜索表单，只有一个输入，所以如果用户点击“Enter”，表单被提交
您在我输入回复时更新了您的答案……以上内容完美。谢谢你的解释。
如果你喜欢，请点击小复选框:)