YUI3按鈕點擊事件的行爲類似於提交類型而不是按鈕類型

我正在使用ASP.NET MVC 3和Yahoo API version 3。我試圖讓我的YUI3 button重新定向到另一個頁面時，我點擊它，這個按鈕是我的取消按鈕。取消按鈕是一個普通的按鈕類型，但它被視爲一個提交按鈕。它不會重定向到正確的頁面，而是像一個提交按鈕，它啓動我的頁面驗證，比如提交按鈕會做什麼。YUI3按鈕點擊事件的行爲類似於提交類型而不是按鈕類型

我認爲這可能與我的HTML，但我沒有驗證它。它驗證了100％正確。於是我將整個頁面剝離到最低限度，但取消按鈕仍然像提交按鈕一樣工作。這裏是我的HTML標記：

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
    <head> 
      <title>Create2</title> 
    </head> 

    <body class="yui3-skin-sam"> 

      <h1>Test submit</h1> 

      @using (Html.BeginForm()) 
      { 
       <button id="SaveButton" type="submit">Save</button> 
       <button id="CancelButton" type="button">Cancel</button> 
      } 

      <script src="http://yui.yahooapis.com/3.6.0pr4/build/yui/yui-min.js"></script> 
      <script> 
       YUI().use('button', function (Y) { 
        var saveButton = new Y.Button({ 
         srcNode: '#SaveButton' 
        }).render(); 

        var cancelButton = new Y.Button({ 
         srcNode: '#CancelButton', 
         on: { 
           'click': function (e) { 
            Y.config.win.location = '/Administration/Department/List'; 
           } 
         } 
        }).render(); 
       }); 
      </script> 

    </body> 
</html>

我不知道我在做什麼錯在這裏？這可能是他們的API中的錯誤？我正在測試IE8和最新版本的FireFox。

UPDATE：

我忘了提，如果這些按鈕是不是形式標記之間，則重定向工作正常。如果我把它們放在窗體標籤中，那麼重定向不起作用。

來源

2012-07-28 Brendan Vogt

的Y.Button小部件去除取消按鈕type屬性。這使得該按鈕的行爲像一個提交按鈕。

有很多可能的路徑來完成這項工作。我將從簡單到複雜。首先是完全避免這個問題，並且完全不使用JavaScript。只需使用一個鏈接：

<form action="/Administration/Department/Create2" method="post"> 
    <button class="yui3-button">Save</button> 
    <a class="yui3-button" href="/Administration/Department/List">Cancel</a> 
</form>

畢竟，所有的按鈕組件正在做的是添加一些CSS類的每個標籤和很多其他的東西，使更復雜的部件成爲可能。正如您在Styling elements with cssbutton示例中所看到的，即使使用YUI css樣式，即使<a>標籤也可能看起來像漂亮的按鈕。如果你不需要使用JavaScript，最好不要使用它。

第二種選擇是避開Y.Button小部件並使用Y.Plugin.Button插件。它在kb和處理能力上都更加輕量級。它不會觸及標籤屬性，所以您的位置代碼將起作用。

YUI().use('button-plugin', function (Y) { 
    Y.all('button').plug(Y.Plugin.Button); 
    Y.one('#CancelButton').on('click', function() { 
    Y.config.win.location = '/Administration/Department/List'; 
    }); 
});

終於可以防止按鈕的默認操作圍繞Y.Button widget的行爲黑客：

var cancelButton = new Y.Button({ 
    srcNode: '#CancelButton', 
    on: { 
    'click': function (e) { 
     e.preventDefault(); 
     Y.config.win.location = '/Administration/Department/List'; 
    } 
    } 
}).render();

來源

2012-08-02 00:01:11 juandopazo

感謝您的詳細解答。你爲什麼認爲這個按鈕是一個提交按鈕？ – 2012-08-06 16:10:58

因爲表單內按鈕的默認類型是「提交」。請參閱標準：http：//www.w3.org/TR/html401/interact/forms.html#adef-type-BUTTON – juandopazo 2012-08-07 01:10:51

默認或不是默認的，他們可以保持按鈕的聲明。 – 2012-08-07 06:15:41

我會使用鏈接，因爲您正在重定向到另一個頁面。這樣做你不需要用javascript初始化它或註冊onClick監聽器。

<button id="SaveButton" type="submit">Save</button> 
<a id="CancelButton" href='/Administration/Department/List'>Cancel</a>

看看這個鏈接風格你鏈接：http://yuilibrary.com/yui/docs/button/cssbutton.html

來源

2012-07-28 14:26:11

請你爲什麼說我需要使用一個按鈕，鏈接instad闡述？ – 2012-07-28 14:29:50

這是一個很好的建議。我也嘗試了鏈接，使用了我的YUI3初始化代碼，我只是拿出了on：部分。當頁面加載時，它看起來像一個按鈕。當我點擊它時，它也是一樣的，提交給表單。如果我取出鏈接的YUI初始化，那麼它是一個提交按鈕，旁邊有一個取消鏈接。它與我看起來不一致。 – 2012-07-28 15:05:11

查看我更新的答案，使鏈接看起來像一個按鈕。 – 2012-07-28 15:16:33

YUI3按鈕點擊事件的行爲類似於提交類型而不是按鈕類型

回答

相關問題