Angular版本v1.5.8,看如下代码:
<body>
<div ng-controller="ctrl">
<form>
<input type="text">
<button ng-click="ch()">点击</button>
</form>
</div>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.ch = function() {
console.log("hello world");
};
});
</script>
</body>
当你聚焦输入框的时候,按回车,神奇的事情发生了:控制台竟然输出hello world
,这意味着angular捕获了input的回车事件,并且用button的处理器来处理。然而,如果你把<button ng-click="ch()">点击</button>
换成<div ng-click="ch()">点击</div>
,就没有我说的这种现象了。
请教高手来解答下,这究竟是什么原因导致的?
这是表单默认提交动作,跟ng无关。
如楼上所说将button,type改成非'submit',或者不用form。
扩展来说其实这个问题很多人没搞清,我这里来总结以下吧~
表单的提交行为,可以用两种方式定义,一是form表单自身,二是form表单的button元素(包括type='submit'的input标签,以及type='submit'的button元素,button默认type为submit)
而按enter键会触发form表单提交,这称为隐式提交。这是为了让那些使用辅助阅读工具使用者(比如屏幕阅读器)或不方便使用鼠标者所设立的
当用户在一个表单的input标签按enter按钮时,
浏览器
会找到表单中的第一个
提交按钮(submit button),并触发click,同时提交表单。如果一个表单里没有任何submit button。当这个表单
只有一个
input元素时,在这个input标签按enter键会隐式
触发表单提交,但表单有多个input标签时就不会触发。
这是在标准里也有说明的:
更多信息查阅-form表单