如何使用Javascript的addEventListener（）來覆蓋HTML窗體的默認提交（）行爲

如何使用addEventListener（）爲HTML窗體的Submit按鈕分配處理程序，類似於按鈕的onclick屬性觸發表單的默認submit（）行爲？如何使用Javascript的addEventListener（）來覆蓋HTML窗體的默認提交（）行爲

我毫不費力地給「提交」按鈕的'onclick'屬性分配一個自定義函數。自定義函數執行各種步驟，然後創建一個Ajax請求對象並使用它將這些數據發送到服務器。默認的submit（）行爲不會被觸發。

submitButton.onclick = function() { 
    mySubmit(); 
    return false; 
}; 

function mySubmit() { 
    //do stuff 
    notTheDefaultUrl = generateNonStandardUrl(); 
    request = GetStandardAjaxRequestThingamabob(); 
    request.open("POST", notTheDefaultUrl, true); 
    request.onreadystatechange = myHandler; 
    request.send(formData); 
    return false; 
}

但隨着使用addEventListener（），瀏覽器提交請求兩次 - 一次在Ajax請求的對象，並再次用默認的HTML表單提交（）行爲。（我可以告訴B/C的mySubmit功能將數據發送到不同的URL不是默認的 - 但無論是默認和Ajax的URL都出現在服務器日誌。）

var func = window['mySubmit']; 
submitButton.addEventListener('click', func, false);

我知道，分配給按鈕的函數必須返回'false'以防止觸發默認的submit（）行爲。我認爲mySubmit（）這樣做，我試圖寫入通過addEventListener傳入的函數，以更明確地返回false（而不是'func'，'function（）{mySubmit（）; return false}'），但是這些dosn也不行。

那麼我該如何做到這一點？

UPDATE

評論彼得的提出了一些瀏覽器兼容性問題;另外，IE不支持addEventListener（）。此代碼解決了這些問題我已經在Firefox和IE 8中對它進行了測試。

function func(event) { 
    if (event.preventDefault) { event.preventDefault()}; 
    event.returnValue = false; 
    // do whatever 
} 

if (submitButton.addEventListener) { 
    submitButton.addEventListener('click', func, false); 
} 
else { 
    submitButton.attachEvent('onclick', func); 
}

對於混亂的新手格式化道歉。

來源

2009-11-13 chernevik

您需要在處理函數中接收事件，並防止事件執行其默認行爲。這適用於click事件，submit事件 - 真的任何可取消的事件。

// using your example 
submitButton.addEventListener('click', func, false); 

// here's what func should look like  
function func(event) 
{ 
    if (event.preventDefault) event.preventDefault(); 
    event.returnValue = false; 
    // do whatever 
}

來源

2009-11-13 19:54:59

我喜歡它，我發佈了html替代品，但我更喜歡你發佈的方式更好，更清潔 – Zoidberg

好的解決方案！而不是分割頭髮，但正如一個註解，這不是一個跨瀏覽器的解決方案。理論上它是，但對於IE瀏覽器，你將需要使用他們的替代方法來實現相同的行爲:) – jaywon

我知道YUI提供了這個功能，並負責處理跨瀏覽器問題。我的形式我爲YUI驗證防止正是這種行爲，如果需要的話 http://yuilibrary.com/gallery/show/formvalidator – Zoidberg

不應該將處理程序添加爲「提交」事件的事件列表程序嗎？

它是有道理的，「點擊」事件處理程序返回false不會阻止默認提交行爲，我認爲。表單提交給兩個目標都是有道理的。

編輯：添加第二段。

評論：和肯說，事件監聽器應該添加到窗體，而不是按鈕。

編輯2：所以我錯了。你不應該使用「返回false」;但類似...

event.preventDefault ? event.preventDefault() : event.returnValue = false;

來源

2009-11-13 19:49:21 EMPraptor

是的，它應該在窗體上，而不是按鈕。 –

簡單的辦法：設置形式onsubmit屬性返回false現在

<form onsubmit="return false;">

如果必須通過通過JavaScript事件偵聽器的分配來完成，然後由彼得·貝利給出的答案是理想的。

我的表單驗證器完全正確地做你想做的事情。看看這個例子

http://murdog05.github.com/yui3-gallery/examples/json/beforeSubmitExample.html

而且代碼

http://yuilibrary.com/gallery/show/formvalidator

你可能會發現它很方便。

來源

2009-11-13 19:56:18 Zoidberg

如何使用Javascript的addEventListener（）來覆蓋HTML窗體的默認提交（）行爲

回答

相關問題