防止多个点击事件触发 JQuery答案

【问题标题】：Prevent multiple click events firing JQuery防止多个点击事件触发 JQuery
【发布时间】：2012-10-03 12:40:30
【问题描述】：

这是场景，我的内容是基于一个类异步加载的。因此，如果我有与 ajaxLink 类的链接，它会触发如下：

$('a.ajaxLink').click(function (e) {
        e.preventDefault();
        var container = $(this).parents('div.fullBottomContent');
        var href = $(this).attr('href');
        container.fadeOut('fast', function () {
            $.ajax({
                url: href,
                dataType: "html",
                type: "GET",
                success: function (data) {
                    container.html(data);
                    BindEventHandlers();
                    container.fadeIn();
                    $.validator.unobtrusive.parse('form');
                },
                error: function () {
                    alert('An error has occurred');
                }
            });
        });

    });

都很可爱。现在在一个实例中，我想向confirm 的用户显示一个警告，他们想要加载页面并放弃所有更改，所以我写了这个：

$('a.addANewHotel').click(function (e) {
        if (!confirm('Adding a new hotel will loose any unsaved changes, continue?')) {
            e.stopPropagation();
        }
    });

现在我已经尝试过return false、e.preventDefault() 和e.stopPropagation();，但不管第一种方法总是被解雇吗？如何防止触发额外的点击事件？这是事件顺序吗？

看不出这有什么关系，但我的 HTML 是：

<a style="" href="/CMS/CreateANewHotel?regionID=3&amp;destinationID=1&amp;countryName=Australia" class="button wideBorderlessButton ajaxLink addANewHotel">Add a new hotel</a>

【问题讨论】：

你的 html 是什么样的？
我不明白您为什么要通过将 2 个不同的事件绑定到同一个元素来执行此操作。我只会显示/不显示确认消息，具体取决于单击了哪个元素，但都在同一个单击事件中（例如使用 hasClass if）
当然是相关的，只是现在我们才知道只有一个atag 有几个类，并且您将两个点击处理程序绑定到同一个标签。
@ThOrndike 我想我可以这样做，但它不是很优雅。 ajax 链接代码有效，似乎很遗憾用大量 if else 混淆它
两个$(..).click() 调用的执行顺序是否与您在帖子中所写的顺序相同？

标签： jquery confirm

【解决方案1】：

你试过了吗：event.stopImmediatePropagation？

我相信这就是你要找的东西：

http://api.jquery.com/event.stopImmediatePropagation/

$('a.addANewHotel').click(function (e) {
        if (!confirm('Adding a new hotel will loose any unsaved changes, continue?')) {
            e.stopImmediatePropagation();
            e.preventDefault();
        }
    });

【讨论】：

不会工作。他在同一个元素上有两个处理程序，这只会停止传播到父元素，并不能帮助他解决这个问题。
来自文档：“阻止其余的处理程序被执行，并防止事件在 DOM 树中冒泡。”
改变主意，这是一个更好的解决方案！需要稍作调整，所以代码最终看起来像：if (!confirm('Adding a new hotel will loose any unsaved changes, continue?')) { e.stopImmediatePropagation(); e.preventDefault(); }
哇...救了我的命！谢谢 :) 当我有情况在 Angular2 下使用 jquery click 事件时，这甚至可以与 Angular2 一起使用！！！

【解决方案2】：

stopPropagation 将阻止事件冒泡到父元素，而不是阻止同一元素上的其他单击处理程序触发。所以你的解决方案行不通。

例如，您可以这样做：

$('a.ajaxLink').click(function (e) {
    e.preventDefault();

    if($(this).hasClass("a.addANewHotel") &&
           !confirm('Adding a new hotel will loose any unsaved changes, continue?')){
        return false;
    }

    var container = $(this).parents('div.fullBottomContent');
    var href = $(this).attr('href');
    container.fadeOut('fast', function () {
        $.ajax({
            url: href,
            dataType: "html",
            type: "GET",
            success: function (data) {
                container.html(data);
                BindEventHandlers();
                container.fadeIn();
                $.validator.unobtrusive.parse('form');
            },
            error: function () {
                alert('An error has occurred');
            }
        });
    });

});

如果您有很多不同类型的链接，您应该将通用代码放在一个函数中，并使用区分类绑定处理程序。然后，这些处理程序可以在适当的时候调用公共代码。

【讨论】：

+1 是的，我可以，如果我不必用大量 if else 来混淆我的通用 ajaxLink 点击会更好吗？
取决于，如果你有很多不同类型的链接需要不同的处理，这会变得混乱，但对于这个例外，我认为这是可以接受的。添加了额外的建议来回答。