YUI3按钮单击事件的行为类似于提交类型，而不是按钮类型 [英] YUI3 button click event is acting like a submit type instead of a button type
问题描述
我正在将ASP.NET MVC 3与Yahoo API version 3一起使用.我试图让我的YUI3 button重定向到我单击的另一页，此按钮是我的取消"按钮.取消按钮是普通按钮类型，但是它被视为提交按钮.它并没有重定向到正确的页面，而是像一个提交按钮，并且像提交按钮一样启动了我的页面验证.
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.
我认为这可能与我的HTML有关，但我确实对其进行了验证.它验证了100％正确.因此，我将整个页面缩减到最低限度，但是取消"按钮仍然像提交"按钮一样工作.这是我的HTML标记:
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>
我不确定在这里我做错了什么吗?这可能是他们的API中的错误吗?我正在IE8和最新版本的FireFox上进行测试.
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.
更新:
我忘了提一下，如果这些按钮不在表单标签之间，则重定向可以正常工作.如果我将它们放在表单标签中，则重定向将不起作用.
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.
推荐答案
Y.Button小部件正在从取消"按钮中删除type属性.这使该按钮的行为就像一个提交按钮.
The Y.Button widget is removing the type attribute from the Cancel button. This makes that button behave like a submit button.
有许多可能的途径可以使这项工作.我将从简单到复杂开始.首先是完全避免该问题，并且根本不使用JavaScript.只需使用链接:
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>
毕竟，Button小部件所做的全部工作就是为每个标签添加几个css类以及许多其他使更复杂的小部件成为可能的东西.如您在使用cssbutton的样式元素示例中看到的，甚至是<a>标签仅使用YUI CSS样式就可以看起来像漂亮的按钮.如果您不必使用JavaScript，最好不要使用它.
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.
第二个选择是避免使用Y.Button小部件并使用Y.Plugin.Button插件.它在kb和处理能力上都更加轻巧.而且它不会触及标签属性，因此您的位置代码可以使用.
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';
});
});
最后，您可以通过阻止按钮的默认操作来破解Y.Button小部件的行为:
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();
这篇关于YUI3按钮单击事件的行为类似于提交类型，而不是按钮类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
