Javascript 防止多次点击触发

数据是通过JSON动态加载的，因此我必须使用

.on

来加载

.target

，而且由于有许多

目标

，我必须在

$.getJSON

中执行一些操作，因此它有几个单击处理程序

$('.container').on('click', '.target', function(e) {
    e.preventDefault();

    $.getJSON(myData, function(data, status) {
        $('.another-element').on('click', 'a', function(e) {
            e.preventDefault();
        });
    }

});

---

。。。。问题是，当单击

。另一个元素

时，它也会触发

。目标

的click事件，导致该元素中的所有函数再次发生。如何防止它？

假设

。另一个元素
是
的子元素。target
，使用

e.stopPropagation();

如中所述

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

更新

不，它不是一个孩子。一个单独的元素（兄弟元素）覆盖在顶部

您可以尝试检查目标

$('.container').on('click', '.target', function(e) {
    if(e.target.classList.toString().indexOf('target') == -1){
        return;
    }
    e.preventDefault();

    $.getJSON(myData, function(data, status) {
        $('.another-element').on('click', 'a', function(e) {
            if(e.target.tagName != 'A'){
                return;
            }
            e.preventDefault();
        });
    }

});

假设
。另一个元素
是
.target
的子元素，则使用

e.stopPropagation();

如中所述

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

更新

不，它不是一个孩子。一个单独的元素（兄弟元素）覆盖在顶部

您可以尝试检查目标

$('.container').on('click', '.target', function(e) {
    if(e.target.classList.toString().indexOf('target') == -1){
        return;
    }
    e.preventDefault();

    $.getJSON(myData, function(data, status) {
        $('.another-element').on('click', 'a', function(e) {
            if(e.target.tagName != 'A'){
                return;
            }
            e.preventDefault();
        });
    }

});

不，它不是一个孩子。一个单独的元素（它是一个
同级元素
）覆盖在顶部。我不想做手动检查，但可以肯定的是，任何有效的元素都可以。不，它不是子元素。一个单独的元素（它是
同级元素
）覆盖在顶部。我不想进行手动检查，但可以肯定，任何操作都可以。为什么不将内部单击处理程序移到外部？你无论如何都在使用委托。寄存器处理程序separately@ShaunakD因为我使用的是回调中的数据，它在外部是不可用的，对吗？可以使用普通变量使其可用，但是回调将失去其意义。因此，我不确定访问或使用数据的内容/方式。为什么不将内部单击处理程序移到外部？你无论如何都在使用委托。寄存器处理程序separately@ShaunakD因为我使用的是回调中的数据，它在外部是不可用的，对吗？可以使用普通变量使其可用，但是回调将失去其意义。因此，我不确定访问或使用数据的方式。