BarbaJS在导航栏中工作正常的问题，但特定链接不能转换页面

Question

我正在使用BarbaJS (我也在github上提出了一个问题)用于一个带有标题导航和徽标的基本站点构建，当我使用导航项目时，转换是完美的，但当我单击标题徽标链接(带有SVG内部)时，它只是重新加载浏览器，我看不出为什么BarbaJS不为标题徽标触发。

任何建议都会很棒，干杯。

HTML标记(去掉了移动导航汉堡之类的东西)：

<div class="site" id="barba-wrapper">
    <header class="header">
        <div class="wrapper header__inner">

            <a href="/" class="header__logo">
                <div class="icon icon--brand-logo">
                    <svg><use xlink:href="#brand-logo"></use></svg>
                </div>
            </a>

            <nav class="menu__wrapper">
                <span class="menu__mask"></span>
                <ul class="menu__list r-ul">
                    <li class="menu__item"><a href="/content.html"class="menu__link">Menu item</a></li>
                    <li class="menu__item"><a href="/content2.html" class="menu__link">Item two</a></li>
                    <li class="menu__item"><a href="#" class="menu__link">Another item</a></li>
                </ul>
            </nav>

        </div>
    </header>

    <div class="site-wrap barba-container has-hero" id="js-site-wrap">
    <!-- Site content that is getting replaced -->
    </div>

</div>

BarbaJS (现在只使用存储库中的基本淡入淡出...)：

import Barba from 'barba.js'

var FadeTransition = Barba.BaseTransition.extend({
    start: function() {
        Promise
            .all([this.newContainerLoading, this.fadeOut()])
            .then(this.fadeIn.bind(this))
    },

    fadeOut: function() {
        return $(this.oldContainer).animate({ opacity: 0 }).promise()
    },

    fadeIn: function() {
        $("html, body").animate({ scrollTop: '0' })

        if ('scrollRestoration' in history) {
            history.scrollRestoration = 'manual';
        }

        const _this = this,
            $el = $(this.newContainer)
            $(this.oldContainer).hide()

        $el.css({
          visibility: 'visible',
          opacity: 0
        })

        $el.animate({ opacity: 1 }, 500, function() {
            _this.done()
        })
    }
})

Barba.Pjax.getTransition = function() {
  return FadeTransition
}

Barba.Prefetch.init()
Barba.Pjax.start()

Answer 1

在标题徽标内的svg中添加“pointer-events:none”解决了这个问题。