防止在按下回车键时触发ng-click事件

Question

我编写了一个timepicker指令，可以输入时间，如果按下Enter键，该值将以特定的时间格式进行格式化。同时输入将会失去焦点。这一切都很好运行。

问题在于，表单中还有一些带有ng-click指令的按钮。如果我按下Enter键，ng-click指令的操作也会被调用，尽管我运行了e.preventDefault();

这是我的指令代码:

$element.keyup(function(e) {
  var keyCode = e.keyCode || e.witch;

  if (keyCode == 13) {
    $element.blur();

    // Do some more stuff here
    e.preventDefault();
    return false;
  }
});

而HTML代码为：

<button class="btn btn-default" ng-click="openModal()">
  <i class="icon-info-sign"></i>
</button>

有趣的是，timepicker 指令按预期工作，并且还会调用 openModal() 函数。我该如何防止这种情况发生？

- tschiela

Answer 1

你的按钮需要添加 type="button" 属性。默认情况下，它被设置为 type="submit"，因此在表单提交时会被调用。

此外，看起来你需要防止按下回车键时提交表单，但这是另一个问题。

- Chetan S

---

有趣的是，我的“<button ...”没有指定类型，尽管我想让它响应我的回车键，但它却没有响应！ - Jenna Leaf

不错！解决了我的问题 ;)。 - Crushnik