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

【问题标题】：IE10 Event Handling for button ng-click and ng-keyup按钮 ng-click 和 ng-keyup 的 IE10 事件处理
【发布时间】：2015-06-22 07:24:42
【问题描述】：

在我的 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");
};

【问题讨论】：

你能在 fiddle 或 plunkr 中提供它吗？
ie9和i8怎么样？
而不是

标签： javascript angularjs internet-explorer-10 angularjs-ng-click

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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");
};

【讨论】：