prototypejs - Prototype.js事件观察点击拦截并停止传播

Question

我有一个围绕包装器构建的页面，其中包含一些非常明确的逻辑。包装后的表单底部有一个保存按钮，如下所示:

<form>
... my page goes here...
<input id="submitBtnSaveId" type="button" onclick="submitPage('save', 'auto', event)" value="Save">
</form>

这不能改变...

现在，我正在将一些 javascript 写入加载到“...my page goes here...”的页面中。代码加载良好并按预期运行。它围绕表单元素做了一些工作，我什至注入(inject)了一些页面验证。这就是我被困的地方。如果验证失败，我试图“拦截”onclick 并阻止页面调用“submitPage()”。我使用的是 prototype.js，所以我尝试了所有变体和组合，如下所示:

document.observe("dom:loaded", function() {
    Element.observe('submitBtnSaveId', 'click', function (e) {
        console.log('Noticed a submit taking place... please make it stop!');
        //validateForm(e);
        Event.stop(e);
        e.stopPropagation();
        e.cancelBubble = true;
        console.log(e);
        alert('Stop the default submit!');
        return false;
    }, false);
});

没有什么能阻止“submitPage()”被调用!观察实际上起作用并触发控制台消息并显示一秒钟的警报。然后“submitPage()”启动，一切都告一段落。我已经删除了 Firebug 中附加到按钮的 onclick，并且我的验证和警报都按预期工作，所以这让我认为传播并没有真正因 onclick 而停止？

我错过了什么？

Answer 1

因此，基于您无法更改 HTML 的事实 - 这是一个想法。

保留当前的 ​​javascript 以捕获点击事件 - 但将其添加到 dom:loaded 事件

$('submitBtnSaveId').writeAttribute('onclick',null);

这将删除 onclick 属性，因此希望事件不会被调用

所以你的 javascript 看起来像这样

document.observe("dom:loaded", function() {
    $('submitBtnSaveId').writeAttribute('onclick',null);
    Element.observe('submitBtnSaveId', 'click', function (e) {
        console.log('Noticed a submit taking place... please make it stop!');
        //validateForm(e);
        Event.stop(e);
        e.stopPropagation();
        e.cancelBubble = true;
        console.log(e);
        alert('Stop the default submit!');
        return false;

        submitPage('save', 'auto', e);
        //run submitPage() if all is good
    }, false);
});