jQuery甚至在DOM加载时也会重复单击

Question

页面加载jQuery重复单击事件。当我单击一次时，它单击两次。页面中所有元素的click事件都在发生。如何避免这种情况？

$('.dest').click(function(event) {
    console.log('try');
    console.log('try2');
});

Answer 1

基于所附的屏幕截图，假设超链接是具有 .dest 类的元素，并且观察到 a 元素具有子元素，这似乎您的点击可能同时激活了 a 元素及其后代，从而在事件冒泡至其父级时重复了事件侦听器逻辑。

处理此问题的最佳实践方法是在文档上设置侦听器，并测试事件目标以确定是否应触发。这是一个例子；

   $(document).on('click', function(e) {

    let $target = $(e.target);

    if ( $target.closest('.dest').length ) {

        console.log('try');
     }
   }

您还可以使用event.preventDefault（）防止事件冒泡，但这在使用寻找点击事件的插件或设置多个点击处理程序时可能会出现问题，因为它将阻止事件冒泡并且不会在第一个处理程序之外被检测到。