3

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

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

这不能改变...

现在，我正在将一些 javascript 编写到加载到“......我的页面在这里......”的页面中。代码加载良好并按预期运行。它围绕表单元素做了一些工作，我什至注入了一些页面验证。这就是我卡住的地方。如果验证失败，我正在尝试“拦截”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？

我错过了什么？

4

2 回答 2

3

因此，基于您无法更改 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);
});
于 2013-03-26T20:47:04.900 回答
2

我接受了 Geek Num 88 提出的想法并将其扩展以完全满足我的需要。我不知道覆盖属性的能力，太棒了！问题仍然是，如果一切正常，我需要运行 submitPage()，并且该方法的参数和调用每页可能不同。这最终比简单地呼吁成功更棘手。这是我的最终代码：

document.observe("dom:loaded", function() {
    var allButtons = $$('input[type=button]');
    allButtons.each(function (oneButton) {
        if (oneButton.value === 'Save') {
            var originalSubmit = oneButton.readAttribute('onclick');
            var originalMethod = getMethodName(originalSubmit);
            var originalParameters = getMethodParameters(originalSubmit);
            oneButton.writeAttribute('onclick', null);
            Element.observe(oneButton, 'click', function (e) {
                if (validateForm(e)) {
                    return window[originalMethod].apply(this, originalParameters || []);
                }
            }, false);
        }
    });
});

function getMethodName(theMethod) {
    return theMethod.substring(0, theMethod.indexOf('('))
}

function getMethodParameters(theMethod) {
    var parameterCommaDelimited = theMethod.substring(theMethod.indexOf('(') + 1, theMethod.indexOf(')'));
    var parameterArray = parameterCommaDelimited.split(",");
    var finalParamArray = [];
    parameterArray.forEach(function(oneParam) {
        finalParamArray.push(oneParam.trim().replace("'","", 'g'));
    });
    return finalParamArray;
}
于 2013-04-02T21:43:06.053 回答