个人中心
gpt4 book ai didi

javascript - 如何将一个键(如空格)绑定(bind)到整个视口(viewport)？

转载 作者：行者123 更新时间：2023-12-02 18:48:46 25 4
gpt4 key购买 nike

我想设置一个键来响应我在页面上按下的任何位置，例如，它不绑定(bind)到单个输入。

我尝试将其附加到按钮或 div 等元素，但根本不起作用。

<div ui-keypress=" { 32: 'test()' } "></div>
<button ui-keypress=" { 32: 'test()' }">Test</button>

我怎样才能实现这个目标？

最佳答案

我已经找到了答案，将事件绑定(bind)到 <body>允许在整个页面中跟踪一个键。

就我而言，我想捕获按键并在给定的 Controller 中处理它，但需要在 body 标签上声明它让我向前迈进了一点。我现在有一个主 Controller ，它有 emit方法，这样我就可以捕获事件并将其路由到某种事件总线。

在子作用域/ Controller 上，我可以捕获事件并检查是否有任何监听器来处理该按键事件。我在 this fiddle 上写了一个例子.

"use strict";

angular.module('myApp', ['ui'])
    .controller('MainCtrl', function($scope) {
        $scope.emit = function($event) {
            $scope.$broadcast('keypress', $event);
        };
    })
    .controller('MyCtrl', function ($scope) {
        $scope.$on('keypress', function($event, event) {
            keypressListeners.forEach(function(listener) {
                if (listener.keyCode === event.keyCode)
                    listener.fn();
            });
        });

        $scope.test = function() {
            alert('Works fine!');
        };

        var keypressListeners = [{ keyCode : 32, fn : $scope.test }];
});
<body ng-app="myApp" ng-controller="MainCtrl" ui-keypress=" { 32: 'emit($event)' } " >
  <div ng-controller="MyCtrl"></div>
</body>

我将不胜感激对此的评论和提示；D

关于javascript - 如何将一个键(如空格)绑定(bind)到整个视口(viewport)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16065509/

25 4 0
文章推荐： javascript - IE 条件检查
文章推荐： c# - 在 Blazor 中使用 @inject 与 [Inject] 依赖注入(inject)之间有什么根本区别吗
文章推荐： c++ - 指向父类成员方法的指针
文章推荐： javascript - 我的函数没有返回
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com