Question

背景

我制作导航菜单，使用ajax将子页面加载到div中。一切正常但是，当我使用菜单到子页面，然后回到主页并再次转到相同的子页面时，发生冒泡并且子页面被加载两次而不是一次。重复这几次之后，子页面被加载的次数与我访问它的次数相同。为了防止这种情况，我使用了.stopImmediatePropagation()。现在页面只加载一次。

问题

但是当我读到有关冒泡的消息时，我发现了这一点：https://javascript.info/bubbling-and-capturing标题为“＃34;不要在没有需要的情况下停止冒泡”的片段！＆＃34;他说阻塞传播会导致一些分析工具运行错误，例如document.addEventListener("click")不再看到菜单元素上的点击事件。这使我们无法在我们的网页上跟踪用户。

问题

如何解决这个冲突？

更具体的信息：

导航元素示例：

<li><a class="nav" data-content="home">Home</a></li>

用于加载子页面的索引文件中的脚本：

var info = {
content: "home",
} //information which subpage is currently loaded, default value determine which subpage will be loaded at the beginning


loadContent(info.content); //load default content

function updateNavigation(){
    $('.nav').click(function(e){
        e.stopImmediatePropagation();
        var content = $(this).data('content');
        if(info.content != content){
            loadContent(content);
        }
    });
}

function loadContent(content){
    $.ajax({
        url: 'loader.php',
        type: 'post',
        data: {content:content},
        success: function(response){
            $('.page_loader').html(response);
            info.content = content;
            changeMenu(content);
            }
    });
}

每个子页面末尾的脚本都要求更新导航。（我的子页面中也有.nav元素）：

updateNavigation();

和

$('.user').sorry(englishIsNotMyNative);

Answer 1

如果您无法停止传播，请检查元素是否为事件的目标：

function updateNavigation(){
  $('.nav').click(function(e){
    if (e.target === this) {
      var content = $(this).data('content');
      if(info.content != content){
        loadContent(content);
      }
    }
  })
}

菜单项的点击事件中的.stopImmediatePropagation（）会干扰分析工具吗？

1 个答案: