is-dropdown-submenu-parent 使链接在 Opera 和 Chrome 上不可点击

Question

我正在尝试在带有下拉菜单的基础上制作一个网站。

但是我注意到，当我点击某些链接时，控制台会出现错误

Uncaught TypeError: t.getBoundingClientRect is not a function

at i (catalog-list-pack-d7c9d20e63.js:4)
at Object.e [as ImNotTouchingYou] (catalog-list-pack-d7c9d20e63.js:4)
at e.value (catalog-list-pack-d7c9d20e63.js:5)
at HTMLLIElement.s (catalog-list-pack-d7c9d20e63.js:5)
at HTMLLIElement.dispatch (catalog-list-pack-d7c9d20e63.js:2)
at HTMLLIElement.y.handle (catalog-list-pack-d7c9d20e63.js:2)

这个破解的代码是来自 foundation 的插件。

我的调试让我得出结论，如果我删除 class is-dropdown-submenu-parent 一切正常。

这个 class 来自基金会，恐怕我会在其他地方插入错误，因为我不明白发生了什么。

另一件事 - 它不仅适用于 Chrome 和 Opera。它适用于 Mozzila 甚至 Microsoft Edge（新的 Internet Explorer）

这是有关如何创建下拉菜单的代码

<div class="MegaMenu__row">
     <div class="MegaMenu__listColumn">
       <dt class="is-dropdown-submenu-parent MegaMenu__item MegaMenu__item--
           header MegaMenu__item--no-bullet">
           <a href="/somewhere</a>
       </dt>

以下是更多可用的链接。

关于破坏其最小化插件并从中获取所有内容的代码很棘手，但这是破坏的功能。我试图让它更具可读性，但我不知道 Dave 是谁。

   function f(t,e) {
      if(t=t.length?t[0]:t,t===window||t===document)
        throw new Error("I'm sorry, Dave. I'm afraid I can't do that.");
      var f=t.getBoundingClientRect(),
      o=t.parentNode.getBoundingClientRect(),
      i=document.body.getBoundingClientRect(),
      s=window.pageYOffset,
      h=window.pageXOffset;
    return{
            width:f.width,
            height:f.height,
            offset:{top:f.top+s,left:f.left+h},
            parentDims:{
                          width: o.width,
                          height: o.height,
                          offset{
                                   top:o.top+s,
                                   left:o.left+h
                                 }
                        },
            windowDims:{
                         width:i.width,
                         height:i.height,
                         offset:{
                                  top:s,
                                  left:h
                                 }
                        }
           }
    }

有人可以向我解释为什么 js 函数在 Opera 和 Chrome 上中断吗？

Answer 1

如果它对任何人有帮助，我们在与 OP 相同的浏览器上遇到相同的错误，但在我们的例子中，它发生在用户调整视口大小时。

原因原来是下拉菜单没有对应的父级触发。

例如：

<li data-toggle="someDropDown">
    <a href="#">OPEN DROPDOWN</a>
</li>

<div id="someDropDown" data-dropdown  data-resize="someDropDown" data-events="resize">
    <div>The dropdown</div>
</div>

这可以正常工作。如果我从代码中删除第一个 li，Foundation 在 window 调整大小时会抛出错误。

换句话说，这是 Foundation 6 中的一个错误。它应该处理下拉菜单订阅调整大小事件并且缺少父项的情况。

is-dropdown-submenu-parent 使链接在 Opera 和 Chrome 上不可点击

is-dropdown-submenu-parent makes links unclickable on Opera and Chrome

html

javascript

css

zurb-foundation