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（）」の呼び出しを止めるものはありません。監視は実際に機能し、コンソールメッセージをトリガーして、アラートを1秒間表示します。次に、「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

私はGeekNum88によって提示されたアイデアを採用し、それを拡張して私のニーズを完全に満たしました。属性を上書きする機能について知りませんでした。これはすばらしいことです。問題は、すべてが正常であれば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 に答える