css - 链接不可点击，只能在手机上长按

Question

我接管的一个 Wordpress 站点中有一个奇怪的错误(我没有开发它，代码有些地方有点乱)。

如果我调整桌面浏览器的大小，移动导航可以正常工作，但如果我在 iPhone 上访问它，则链接不可点击。它们是可长按的(例如，我可以在新标签页中打开)，但在我的 iPhone 上，无论是在 Safari 还是 Chrome 中，点击它们都没有任何作用。

还有其他人遇到过这个问题吗？

我工作的登台服务器在这里:frame.staging.wpengine(虽然它在主站点上也坏了，而且已经坏了我不知道多久了)。

HTML(检查时)是:

<div id="mobile-nav" style="display: block;">

    <div id="mobile-nav-button0" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20.0001, 0, 0, 1);">
        <a href="https://blog.frame.io/">BLOG HOME</a>
    </div>
    <div id="mobile-nav-button1" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20.0001, 0, 0, 1);">
        <a href="https://blog.frame.io/2017/02/09/manifesto">MANIFESTO</a>
    </div> 
    <div id="mobile-nav-button2" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20.0001, 0, 0, 1);">
        <a href="#footer-email-wrapper">SUBSCRIBE</a>
    </div>
    <div id="mobile-nav-button3" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 19.9992, 0, 0, 1);">
        <a href="https://frame.io/">VIDEO REVIEW TOOLS</
    </div>

</div>

当我打开移动导航时，javascript 添加了 style="transform..."。

这是应用于#mobile-nav 的 css 规则。

#mobile-nav {
    position: absolute;
    right: 0px;
    padding-top: 45px;
    width: 50%;
    font-family: AzoWeb-Bold;
    font-size: 16px;
    color: white;
    text-align: left;
    line-height: 36px;
    overflow: hidden;
    display: none;
    height: 100%;
    background-color: #2e323f;
}

菜单“hamburger-menu.js”有一个 js 文件，但它有 1600 行:/ 如果不深入研究所有这些 javascript 就无法识别任何内容，我想我可能不得不将其丢弃并构建我自己的(更简单的)移动导航栏。

Answer 1

我去了你的site在移动 View 中。每次我点击链接。此警告出现在控制台中:

由于目标被视为被动，无法阻止被动事件监听器中的默认设置。请参阅 https://www.chromestatus.com/features/5093566007214080

似乎正在发生的事情是您有一些 jquery 正在阻止 anchor 标记导航。仅适用于手机。我试图通过你的 JS 进行追踪，但它被缩小了。

希望能帮助你调试。干杯。