Question

我有一个这样的简单按钮：

<button type="button" ng-click="$ctrl.method($event)">Test</button>

这是ng-click表达式的样子：

vm.method = function($event) {
    console.log($event.type, $event.which);
};

当此按钮具有焦点时（通过Tab键导航到它）并按Enter键，我将此输出发送到控制台：

click 1

更清楚的是$ event.type =='click'和$ event.which == 1.

我不确定为什么ng-click指令允许使用enter键来触发指定的表达式。 Angular正在记录输入keydown事件作为点击。有没有办法防止这种情况，只有ng-click处理点击事件（并忽略输入）？

这个简单的代码只是一个例子，在我的应用程序中，我想在同一个组件上使用ng-keydown和ng-click，但是这个特殊问题阻止我完全实现我想要的功能。理想情况下，我想让ng-keydown只处理keydown事件，而ng-click只处理点击事件。

Answer 1

可能但不是最好的方法是检查$ event的screenX / screenY / pageX / pageY / offsetX ...道具。如果是＆＃34;输入＆＃34;它们等于零。

Answer 2

只需阻止按键上的默认值，例如

 vm.method = function($event)   {    
    if($event.keyCode === 13){ //I think
       $event.preventDefault();
    }   
    console.log($event.type, $event.which);
};

Answer 3

如果您的按钮位于表单内并且它是唯一的按钮，则当表单具有焦点时，将在输入时触发click事件，具体取决于浏览器。您应该能够在处理程序方法中检查事件对象，如果它是Enter键触发则返回false。

https://docs.angularjs.org/guide/expression#-event-

防止在输入keydown时触发ng-click表达式

3 个答案: