ng-keypress事件向下滚动页面

我是angularjs的初学者，我试着理解为什么当用户按下空格键时，我的组件（一个带有fontawesome图标的“复选框模拟”）向下滚动页面。ng-keypress事件向下滚动页面

这里是我的组件：

ugoFmk.component('ugoFmkCheck', { 
    bindings: { 
     label: '<', 
     isSelected: '<', 
     isToggleOnKeypress: '<', 
     toggleCheck: '&', 
     checkedClass: '<', 
     uncheckedClass: '<' 
    }, 
    controller: function ugoCheckController() { 
     var vm = this; 

     vm.$onInit = function() { 
      if (vm.isToggleOnKeypress === undefined) 
       vm.isToggleOnKeypress = true; 
      if (vm.checkedClass === undefined) 
       vm.checkedClass = 'fa fa-check-square-o'; 
      if (vm.uncheckedClass === undefined) 
       vm.uncheckedClass = 'fa fa-square-o'; 
     } 
     vm.getCheckboxClass = function() { 
      return vm.isSelected ? vm.checkedClass : vm.uncheckedClass; 
     } 
     vm.runOnKeyPress = function (e) { 
      if (vm.isToggleOnKeypress === false) 
       return; 
      if (e.which === 32) 
       vm.toggleCheck(); 
     } 
    }, 
    template: "<span tabindex='0' ng-keypress='$ctrl.runOnKeyPress($event);' ng-click='$ctrl.toggleCheck()'><i ng-class=\"$ctrl.getCheckboxClass()\"></i> {{$ctrl.label}}</span>" 
});

及其用途：

<div class="col-lg-offset-1 col-lg-3" ng-class="{'has-error': vm.hasCiviliteError()}"> 
<div class="input-group input-group-sm"> 
    <span class="input-group-addon" id="spnCivilite">Civilité</span> 
    <div tabindex="0" class="form-control" name="divCivilite" id="divCivilite" ng-focus="vm.makeCiviliteDirty()" ng-blur="vm.makeCiviliteDirty()"> 
     <ugo-fmk-check ng-repeat="opt in vm.civilites" 
         is-selected="opt.selected" 
         toggle-check="vm.selectCivilite(opt.Code)" 
         label="opt.Code" 
         style="margin-right:20px" 
         ng-focus="vm.makeCiviliteDirty(false)" 
         ng-blur="vm.makeCiviliteDirty(true)" 
         ng-class="{'color-placeholder':!opt.selected}"></ugo-fmk-check> 
    </div> 
    <i class="glyphicon glyphicon-remove form-control-feedback" ng-show="vm.hasCiviliteError()"></i> 
</div> 
<div ng-show="vm.hasCiviliteError()" class="text-danger small"> 
    <span>* Cette zone est obligatoire</span> 
</div>

和结果：

来源

2017-02-21 lolo

滚动与空格键页的结尾是大多数浏览器/网站的标准行为。

这里提出了一个快速简单的解决方案/修复方法：HTML prevent space bar from scrolling page

来源

2017-02-21 10:27:47 uzr

哦！我不知道！我更改我的代码并使用keydown事件，如果它是空格键，我取消事件...它的工作！谢谢 – lolo

ng-keypress事件向下滚动页面

回答

相关问题