javascript - 在执行所有点击之前触发 jQuery 函数

Question

我试图按如下方式对我的应用程序实现权限检查。如果用户单击具有特定属性 check-permission 的元素，则执行 jquery 函数并检查权限。

我面临的真正问题是我的应用程序中可能有超过 20 个启用了权限检查的可点击元素。这些元素可以是 div 或 a 标签等，并附加到其他一些 jquery 事件；例如;触发弹出模式，重定向到页面等。

我想在执行所有其他点击事件之前执行我的 permissionCheck 函数。我创建了一个自定义事件并将其绑定(bind)到点击功能；但这不起作用。

有人可以建议我实现这个的好方法吗？提前致谢。

Answer 1

有几种方法可以做到这一点 - stopImmediatePropagation ;使用 jQuery._data(this, 'events') 获取所有事件并用你的验证函数包装它；取消绑定(bind)事件并将它们绑定(bind)回去。

然而，在我看来，最方便和正确的方法是创建自定义事件，如 permitted和 unpermitted , 并附加到它而不是 click .这样，您将能够同时拥有权限感知和简单的处理程序。此外，代码将变得更具可读性，因为您将看到哪些方法需要许可。

$("selector")
    .on('permitted', function() {
        // executed if permission check passed            
    })
    .on('unpermitted', function() {
        // executed if permission check failed    
    })
    .on('click', function() {
        // executed always!
    });

您可以在 click 中调度这些事件处理程序，

$(document).on('click', '[check-permission]', function(e) {
    var checkResult; 
    // custom permission validation logic

    this.dispatchEvent(new CustomEvent(checkResult ? 'permitted' : 'unpermitted'));

    e.preventDefault();
});

将需要这些权限的所有操作附加到 permitted它将起作用。

这是 working JSFiddle demo 。在这个例子中，decrease和 increase如果 permit，按钮会更改这些链接的大小复选框被选中。否则，它会显示错误。

但是，在客户端实现权限验证只能用于装饰目的。你不应该依赖这个。应在服务器端实现适当、安全且不可妥协的授权。