Javascript 在执行所有单击之前触发jQuery函数

我试图在我的应用程序上实现权限检查，如下所示。如果用户单击了具有特定属性的元素

检查权限

，则执行jquery函数并检查权限

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

我面临的真正问题是，在启用权限检查的应用程序中，可能有20多个可单击的元素。这些元素可以是

div

或

a

标记等，并附加到一些其他jquery事件；例如触发弹出模式，重定向到页面等

我想在执行所有其他单击事件之前执行我的

permissionCheck

功能。我创建了一个自定义事件并将其绑定到click函数；但这是行不通的

---

有人能给我一个好的方法来实现这一点吗？非常感谢。

有几种方法可以做到这一点-

停止即时广播

；使用

jQuery.\u数据（这是“事件”）

获取所有事件，并用验证函数包装它；取消绑定事件并将其绑定回

但是，在我看来，最方便、最恰当的方法是创建自定义事件，如

允许的

和

不允许的

，并附加到它而不是

单击

。这样，您将能够同时拥有权限感知和简单处理程序。此外，代码将变得更具可读性，因为您将看到哪些方法需要权限

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

您可以在

单击
处理程序中调度这些事件

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

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

    e.preventDefault();
});

将所有需要这些权限的操作附加到
允许的
，它就会工作

这是。在本例中，如果选中了
允许
复选框，则
减少
和
增加
按钮会更改这些链接的大小。否则，它将显示一个错误

但是，在客户端实现权限验证只能用于装饰目的。你不应该依赖这个。应该在服务器端实现适当、安全且不可妥协的授权。
您的答案是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");
});

测试错误
测试正确
$（“[data check permission=“true”]，[data check permission=“false”]”）。在（'click'，函数（事件）{
var$eventTarget=$（event.currentTarget）；
if（$eventTarget.data（“检查权限”）==false）{
事件。stopImmediatePropagation（）；
}
});
$（“#testFalse，#testTrue”）。在（“单击”，函数（事件）{
控制台日志（“测试”）；
});
.trigger（eventName）绑定事件时权限检查功能如何工作？您是说，如果用户多次单击，第二次和后续的单击可能会在第一次权限检查完成之前发生（因为它执行异步操作，例如发出ajax请求）？请将您的问题添加到相关代码中。检查客户端的权限不是一个好的解决方案，因为客户端计算机/用户对其具有完全访问权限。他们可以使用检查工具更改属性。因此，如果用户更改了属性
检查权限
，则该功能将不起作用。在文档准备就绪时，检查用户是否没有权限，然后使用
事件取消绑定所有单击事件。preventDefault（）
？请注意，应首先声明此
数据检查权限
单击处理程序，因为它提供了事件执行顺序。