YUI3 button click event is acting like a submit type instead of a button type

问题

I am using ASP.NET MVC 3 with the Yahoo API version 3. I am trying to get my YUI3 button to redirect to another page when I click on it, this button is my cancel button. The cancel button is a plain button type, but it is being treated like a submit button. It is not redirecting to the correct page, but acting like a submit button and it kicks off my page validation like what the submit button would do.

I thought that it might be with my HTML but I did validate it. It validated 100% correct. So I then stripped down the whole page to a bare minimum but the cancel button is still working like a submit button. Here is my HTML markup:

@{
    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>

I'm not sure what I am doing wrong here? Is this maybe a bug in their API? I am testing on IE8 and on the latest version of FireFox.

UPDATE:

I forgot to mention that if these buttons are not between form tags then the redirect works fine. If I put them in form tags then the redirect does not work.

回答1:

The Y.Button widget is removing the type attribute from the Cancel button. This makes that button behave like a submit button.

There are many possible paths to make this work. I'll start from simple to complex. The first is to avoid the issue entirely and not use JavaScript at all. Just use a link:

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

After all, all that the Button widget is doing is adding a couple of css classes to each tag and a lot of other stuff that makes more complex widgets possible. As you can see in the Styling elements with cssbutton example, even <a> tags can look like nice buttons using just the YUI css styles. If you don't have to use JavaScript, better not to use it.

A second option is to avoid the Y.Button widget and use the Y.Plugin.Button plugin. It's more lightweight in both kb and processing power. And it doesn't touch the tag attributes, so your location code will work.

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

And finally you can hack around the behavior of the Y.Button widget by preventing the default action of the button:

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

回答2:

I would use a link because you are redirecting to another page. Doing it this way you wouldn't need to initialize it with javascript or register the onClick listener.

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

Look at this link to style your link: http://yuilibrary.com/yui/docs/button/cssbutton.html

来源：https://stackoverflow.com/questions/11701804/yui3-button-click-event-is-acting-like-a-submit-type-instead-of-a-button-type

标签

javascript

asp.net-mvc

asp.net-mvc-3

web-applications

yui