0

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

$('.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，我如何才能最终取消由其他代码位触发的事件？

4

3 回答 3

0

而不是停止事件，我认为更好的方法是要么简单地将事件放入不应该在不登录的情况下可行的元素中，要么使用变量跟踪 JS 代码中的身份验证状态并在执行之前检查它行动。如果您正在构建客户端 MVC 风格的应用程序，后者可能是一种更好的使用方法。

于 2012-06-19T22:08:20.310 回答
0

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

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

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

于 2012-06-19T22:19:38.757 回答
0

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

  • 听众依附于不同的元素，与它们应有的相反
  • 侦听器被附加到同一个元素

不同的元素

您的处理程序出现故障，交换它们以便 e.stopPropogation() 位于内部（子）元素上，而 $.post() 调用位于外部（父）元素上。

相同元素

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

停止传播（）

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

根据DOM Level 2 Spec的传播仍然会在同一个元素上执行所有侦听器，但不会执行附加到父元素的事件：

如果捕获的 EventListener 希望阻止对事件的进一步处理，它可以调用 Event 接口的 stopProgagation 方法。这将阻止事件的进一步分派，尽管在同一层次结构级别注册的其他 EventListener 仍将接收该事件。

防止默认（）

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

默认操作基于正在操作的元素 ( 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');
        });
    }
});
于 2012-06-19T22:44:37.750 回答