Событие 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()» запускается, и все идет пока. Я удалил onclick, прикрепленный к кнопке в Firebug, и моя проверка и предупреждение все работают по назначению, так что это заставляет меня думать, что распространение на самом деле не остановлено для onclick?

Что мне не хватает?

Answer 1

я принял идею, представленную 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; 
} 

Answer 2

Так что, основываясь на том, что вы не можете изменить HTML - вот идея.

оставить свой текущий JavaScript как поймать событие щелчка - но добавьте к этому йоту: загружено событию

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