Prototype.js事件觀察點擊攔截並停止傳播

Question

我有一個頁面是圍繞一個包含一些非常定義的邏輯的包裝。有關於包裝的形式底部的保存按鈕，看起來像這樣：

<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

我通過了野人民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; 
} 

Answer 2

因此，基於您無法更改HTML這一事實 - 這裏有一個想法。

離開目前的JavaScript爲的是趕上click事件 - 但這添加到DOM：加載事件

$('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); 
});