2

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

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

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

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

4

2 回答 2

1

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

但是，在我看来，最方便和正确的方法是创建自定义事件，例如permittedand 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它将起作用。

这是有效的 JSFiddle 演示。在此示例中，如果选中复选框decrease，increase按钮会更改这些链接的大小。permit否则，它会显示错误。

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

于 2015-11-04T06:23:32.933 回答
0

你的答案是 stopImmediatePropagation ，它会像 stopPropagation 一样停止冒泡并阻止所有其他处理程序执行。

这是一个例子。

<div id="testFalse" data-check-permission="false">Test False</div>
<div id="testTrue" data-check-permission="true">Test True</div>



$('[data-check-permission="true"],[data-check-permission="false"]').on('click', function (event) {
    var $eventTarget = $(event.currentTarget);
    if ($eventTarget.data("check-permission") == false) {
        event.stopImmediatePropagation();
    }
});


$("#testFalse,#testTrue").on("click", function (event) {
    console.log("test");
});
于 2015-11-04T06:28:05.733 回答