Javascript 使用单个函数从另一段代码中取消 POST

Javascript cancel POST from another piece of code using one single function

本文关键字：一段 代码 POST 取消 单个 函数 Javascript      更新时间：2023-09-26

好的，在我的代码中，例如：

$('.follow').click(function(){
        var myself = $(this);
        var data = {
            id: this.getAttribute('data-id')
        }
        $.post('/users/setFriend', data, function(msg){
            myself.text(msg);
            myself.attr('data-status-friends', (myself.attr('data-status-friends').toLowerCase() == 'follow') ? 'following' : 'follow');
        });
    })

但是，我在某些元素上放置了一个"auth"类，如果用户注销，请运行以下JS：

$('.auth').click(function(e){
    e.preventDefault();
    alert('not logged in');
});

这适用于大多数元素，但对于上述 POST，它似乎仍然会操作 POST。如果单击 .auth，如何最终取消由其他代码位触发的事件？

我认为

我们不应该在这里谈论传播或默认操作预防。关键是要创建两个不同的事件处理程序系列：一个附加到.follow元素，另一个附加到.auth元素。当然，如果一个元素有两个类，单击它将自动触发两个处理程序 - 它们都将附加到该元素（因此没有传播）。

我认为，这里最简单的解决方案是在将类分配给元素时click .auth处理程序中删除。

或者，您也可以在.follow处理程序函数中检查$(this).hasClass('auth')条件 - 如果是这种情况，请立即return false。

与其

停止事件，我认为更好的方法是简单地不将事件放入不登录就不应该做的元素中，或者使用变量跟踪 JS 代码中的身份验证状态并在执行操作之前进行检查。如果要构建客户端 MVC 样式应用程序，后者可能是更好的使用方法。

对于不同的解决方案集，您可能会遇到两个问题。

  • 侦听器附加到不同的元素，与它们应该是什么相反
  • 侦听器附加到同一元素

不同的元素

你的处理程序是乱序的，交换它们，以便 e.stopPropogation（） 在 inner（child） 元素上，$.post（） 调用在 outter（parent） 元素上。

相同元素

如果侦听器位于同一元素上，则 e.stopPropogation（） 和 e.preventDefault（） 都不会执行您希望的操作，因为事件侦听器仍将在同一元素上触发。

stopPropogation（）

描述：防止事件在 DOM 树中冒泡， 防止任何父处理程序收到事件通知。

根据 DOM 级别 2 规范的传播仍将在同一元素上执行所有侦听器，但不执行附加到父元素的事件：

如果捕获事件侦听器希望阻止进一步处理 事件发生后，它可能会调用 停止Progagation 方法 事件接口。这将防止事件的进一步调度， 尽管在同一层次结构中注册了其他事件侦听器 级别仍将接收事件。

防止默认（）

说明：如果调用此方法，则事件的默认操作 不会被触发。

默认操作基于正在操作的元素 （W3C）。对于链接，这将是重定向到 href=" 值、输入元素以聚焦它等。这不是您想要的，因为您很可能不是"默认行为"。

一种选择是将调用 $.post 的处理程序附加到 DOM 上较高的元素。

$('.follow').parent().click(function(e){e.stopPropogation()})

您可能需要更改目标 HTML，以便将事件附加到内部（子）和外部（父）元素。目标是让 $.post 处理程序作为外部（父级）和内部（子级）处理程序取消事件。

另一种选择是添加检查以查看元素上是否存在其他类。

$('.follow').click(function(){
    var myself = $(this);
    if(!$(this).hasClass('.auth')){
        var data = {
            id: this.getAttribute('data-id')
        }
        $.post('/users/setFriend', data, function(msg){
            myself.text(msg);
            myself.attr('data-status-friends', (myself.attr('data-status-    friends').toLowerCase() == 'follow') ? 'following' : 'follow');
        });
    }
});
相关文章：