Question

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

<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？

我错过了什么？

Answer 1

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

保留当前的javascript以捕获click事件 - 但将其添加到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);
});

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

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

2 个答案: