Question

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

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

Answer 1

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

Answer 2

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

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

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

Answer 3

你可能会遇到两个问题，包括不同的解决方案。

听众与不同的元素相关联，与
将侦听器附加到同一元素

不同元素

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

相同元素

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

stopPropogation()

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

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

如果捕获EventListener希望阻止进一步处理发生的事件可能会调用stopProgagation方法事件界面。这将阻止进一步发送事件，虽然在同一层次结构中注册了其他EventListeners 等级仍将收到该事件。

preventDefault()

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

默认操作基于对哪个元素采取行动（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');
        });
    }
});

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

3 个答案: