在执行所有点击之前触发一个 jQuery 函数

Question

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

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

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

有人可以建议我一个很好的方法来实现这个吗？非常感谢。

Answer 1

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

但是，在我看来，最方便和正确的方法是创建像 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。在此示例中，如果选中了 permit 复选框，decrease 和 increase 按钮会更改这些链接的大小。否则显示错误。

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

Answer 2

您的答案是 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");
});