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按钮点击事件的行为类似于提交类型而不是按钮类型

回答

相关问题