Question

在我的HTML文件中，我有一个文本框和一个按钮，它们之间没有任何关联。奇怪的是，当我在键盘上的文本框中输入文本时，它实际上运行连接到按钮的功能 ng-click属性。 仅发生在IE10上，，但不是IE11或任何其他浏览器。

知道为什么会这样吗？

HTML

<h3>Group Fields  <input id="groupfields" ng-keyup="fr_group_update($event)"  ng-model="groupfields"></h3>

<div>
  <button ng-click="purge_tasks()">Purge Selection</button> <br/>
</div>

控制器

$scope.fr_group_update = function(event){ 
    if (event.keyCode === 13) {
        alert("This should run");
    }
};

$scope.purge_tasks = function(event){ 
    alert("This runs instead");
};

Answer 1

IE10 seems to handle buttons没有type属性，就好像它们是提交按钮一样。因此，当您在页面上的任何输入上按Enter键时，它会触发它找到的第一个按钮。

您可以通过将type属性明确设置为button来轻松解决此问题：

<button type="button" ng-click="purge_tasks()">Purge Selection</button>

Answer 2

Angular表单曾经有过一个有趣的行为：如果表单中只有一个按钮，它会将表单提交设置为单击该按钮。在文本框中按Enter键时，将触发表单提交。

现在我不知道为什么这是IE版本特定的，但这是我能说的最接近的事情。即使没有表格，IE 10也可能做类似的事情。

如果您不需要也没有表单，请在按钮周围添加一个表单，或者尝试明确地将类型设置为按钮，看看是否有帮助。

Answer 3

对于IE来说，一个干净/快速的解决方案（至少在我的情况下）：

$event.stopPropagation();

HTML

<h3>Group Fields  <input id="groupfields" ng-keyup="fr_group_update($event)"  ng-model="groupfields"></h3>

<div>
  <button ng-click="purge_tasks()">Purge Selection</button> <br/>
</div>

的JavaScript

$scope.fr_group_update = function(event){ 
    $event.stopPropagation();
    if (event.keyCode === 13) {
        alert("This should run");
    }
};
$scope.purge_tasks = function(event){ 
    alert("This runs instead");
};

按钮ng-click和ng-keyup的IE10事件处理

3 个答案: