Question

我在Wordpress网站上遇到了一个奇怪的错误，我已经接管了（我没有开发它，而且代码有点乱）。

如果我调整桌面浏览器的大小，移动导航工作正常，但如果我在iPhone上访问它，则链接无法点击。 ARE可长按（例如，我可以在新标签中打开），但点击它们在我的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>

style =＆＃34;转换......＆＃34;我打开移动导航时通过javascript添加。

以下是适用于#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;
}

菜单中有一个js文件＆＃34; hamburger-menu.js＆＃34;，但它有1600行：/ 如果没有挖掘所有的javascript就无法识别，我想我可能不得不把它丢弃并构建我自己的（更简单的）移动导航栏。

Answer 1

我在移动视图中找到了site。每次我点击链接。此警告显示在控制台中：

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

似乎正在发生的事情是你有一些jquery阻止了锚标记的导航。仅限移动设备。我试图追踪你的JS，但它已经缩小了。

希望能帮助您调试。欢呼声。

链接无法点击，只能在移动设备上长按

1 个答案: