防止默认事件并在之后恢复答案

【问题标题】：Prevent default event and resume afterwards防止默认事件并在之后恢复
【发布时间】：2023-03-11 18:35:01
【问题描述】：

我想为我的网站的受限操作创建一个 angularjs 指令。例如，我有一个锚点会触发角度的路线变化，但在此之前我想显示一个模式登录对话框。

我可以使用preventDefault 停止路由，但无法恢复路由。我也尝试过虚拟事件触发（element.triggerHandler('click')），但没有成功。

我想将该指令不仅应用于路由更改，还应用于任何其他操作。

.directive('loginRequired', ['AuthService', 'AUTH_EVENTS',
function(AuthService, AUTH_EVENTS) {
    return {
        link : function(scope, element, attrs) {
            element.on('click', function(e) {
                if (!AuthService.isAuthenticated()) {
                    e.preventDefault();
                    $('#myModal').modal();
                    scope.$on(AUTH_EVENTS.loginSuccess, function() {
                        //resume event
                    });
                    console.log('$scope.$on happened');
                }
            });
        }
    }
}]);

有什么建议吗？

【问题讨论】：

标签： jquery angularjs angularjs-directive jquery-events

【解决方案1】：

我找到的解决办法是：

.value('lastPrevented', {
    elem : null
}).directive('loginRequired', ['AuthService', 'lastPrevented',
function(AuthService, lastPrevented) {
    return {
        link : function(scope, element, attrs) {
            element.on('click', function(e) {
                if (!AuthService.isAuthenticated()) {
                    lastPrevented.elem = element;
                    e.preventDefault();
                    $('#myModalLogin').modal();
                }
            });
        }
    }
}]).run(['lastPrevented', '$rootScope', 'AUTH_EVENTS', '$timeout',
function(lastPrevented, $rootScope, AUTH_EVENTS, $timeout) {
    $rootScope.$on(AUTH_EVENTS.loginSuccess, function() {
        $timeout(function() {
            if (!!lastPrevented.elem) {
                lastPrevented.elem[0].click();
                lastPrevented.elem = null;
            }
        })
    });
}]);

这不是恢复......从字面上我认为这是不可行的。该解决方案的灵感来自this question。

【讨论】：

【解决方案2】：

我认为Event.preventDefault() 不会捕获或延迟事件。 AFAIK，它只会彻底取消它们（参见MDN）。我不相信有一种方法可以通过其处理程序恢复原始事件。（但也许您不打算将“简历”一词按字面意思理解。）

在这种特定情况下，我认为您必须检查$(e.target).attr('href')，然后**使用它来更新路由（您需要注入$location 服务（Docs）并使用它的.path()getter/setter 方法）。

-- 祝你好运！

**快速说明：您很可能希望将您的“恢复”处理程序作为回调传递给您的AuthService.isAuthenticated() 方法，因为它可能会等待某种异步业务。粗略的例子：

element.on('click', function(e) {
  e.preventDefault();
  newRoute = $(e.target).attr('href');
  AuthService.isAuthenticated(function () {
    $('#myModal').modal();
    scope.$on(AUTH_EVENTS.loginSuccess, function() {
      $location.path(getWhatYouNeedFromUrlString(newRoute));
    });
  }));
});

您需要设置 .isAuthenticated() 方法以在用户确实通过身份验证时触发回调。

【讨论】：